I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.
Related
I came across the problem of image loading in website.
It's need to load 3 high resolution images in home page, and when open, it's showing website other contents first and load this images which is fine for now.
But it's slightly awkward, and would like to have similar image loading process like Google image search.
When I click image in Google, it shows blurred or pixelate image which seems like low resolution and lower size and loading original image a bit later.
They might use special thing as they are Google, but if someone have done this kinds of things before, I need your help.
Thanks in advance
Sounds like you want what are called "progressive JPEGs", where multiple images of varying quality are saved in one file, and the browser loads the low resolution images quickly to get something in the page, and replaces it with higher resolution images once they've been loaded.
Here's a tutorial on saving JPEGs for the web as progressive in Photoshop
You can use jQuery. The following is a general idea, not an exact code.
For each image use something like:
<div>
<img id="myimg" src="" style="display:none">
<img src="low-res-version link">
</div>
You should also keep a low res image.
Use jQuery to set your images src after the page loades, and use the next() function to remove the low res image.
$(document).on('ready', function() {
$('#myimg').attr('src', 'link to the image').on('load', function() {
$(this).css('display', 'block').next().remove();
}
You can also check this question: Fast Image loading methods, low to high res with multiple backgrounds - javascript solution?
Well, I choose resolutions from the server-side;
loading the low-res immediately in a z-index=0 object,
loading the one or more hi-res objects into negative z-index objects
and then at onload(), choose which object should be on top
I have been working on a new site, and the person who cut it used dreamweaver. It put in mm_preloadimages into the header and uses it on the body. However, it's only loading like 3 of the 30 images on the more complicated pages.
Is preloading a common practice even with more modern html? Or should this be left to the browser to download images.
It depends on your need, according to requirements of the application/project. For example, I did it once for a specific need and it was that, I have used a hover effect on by blog using JavaScript and when I hovered over the element, it just toggles the image but I realized that, at the first hover it used to take more time to alternate the image because, the image used to be loaded only after the hover on the element and that's why I used image pre-loading technique, so, during the page load, I loaded the image that is going to be used for the hover effect.
So, it's not about common practice but it's about your need, if you really need to pre-load some images then you may use it but if not necessary then just leave it, IMO.
Also, remember that, every time you load an image, it makes an individual HTTP request to load the image, so if you load a huge amount of images on the page load, it may slow down the page loading.
The preloading concept mainly serves for menus that have different background images on mouse hover. You can always use image sprites to have all backgrounds you are using in one single image.
I think the common practice nowadays is to use CSS to style menus and avoid using images at all. If CSS rules cannot satisfy the needs of the design, you can put your images in one using sprites, thus eliminating the need to preload images and avoid having many http requests.
i am programming a jquery plugin which loads lots of images.
I would prefer to show the picture first fuzzy and if it's fully loaded, in complete.
Facebook is a good example.
How does this technique work?
This depends on the format that the image is saved in.
JPG images normally load (and hence display) from top to bottom. If however they are stored in progressive (also called interlaced) format then they will load the whole image in a grainy format and gradually increase the quality. Facebook save their images in the progressive format.
There are utilities available for converting from the first format into the second. Here is a link to a well known one (ImageMagick): ImageMagick
You just have two images: one of bad quality, and one of good quality and.
When you want to show image, you first set image.src to bad quality image, and then instantly to good image path (setTimeout with 0 delay will work too).
It works, because browser doesn't replace image in img tag until it's fully loaded. Image with bad quality will loaded much faster than good image, so user will first see fuzzy image and fully loaded image when it's loaded.
Example
img.src = 'path/to/fuzzyImage.jpg';
setTimeout(function() {
img.src = 'path/to/fullImage.jpg';
}, 0);
The usual approach is to set width and height on a thumbnail version of the image to full size of the big image, and replace the thumbnail with full image when the large one is loaded. When you set the full size on the thumbnail image, it becomes 'fuzzy' becuase it's interpolated to a larger size by the browser.
On my website there is a webpage where there are 100 images and it is inelegant to see the images that are loaded one at a time from the browser.
Is there some way to get it more elegant and nice to see ?
You could Lazy Load the images, which means they are only loaded when displayed on the browser. This works by simply using the following:
$("img.lazy").lazyload();
However, if the images which will be visible on page load are very large file size, theres not much you can do to prevent this.
An idea I have used before to make this more user-friendly is to place each img element in div which has a background image of an ajax loader. This at least gives the appearance that something is loading. Then once the image is loaded, this will overlay the loading image.
EDIT: Seeing your latest comments, if you are using very small images, as #afaf12 has pointed out, using CSS Sprites would be a suitable solution. A lot of large sites, including StackOverflow, make use of these. It means rather than 100 HTTP Requests being made for all the images, 1 HTTP Request is made (ie. 1 image download), and then CSS is used to position this image in different places.
There are various different CSS Sprite generators also available to prevent you from the laborious task of making this yourself:
Since images are very small, this could be a situation where css sprites are useful.
Instead of having 100+ small images, you have 1 large.
When you want to show a specific image, you have to specify background coordinates, for example:
div#div1 {background-position:0px -100px}
One way to make it look more pleasing is to make the images fade in when they have been loaded:
$('img').css('opacity', '0.0').load(function(){
$(this).animate({'opacity': '1.0'});
});
Demo: http://jsfiddle.net/Guffa/gzFFN/
http://code.google.com/p/jquery-appear/
jQuery appear event that is triggered when objects "appear" i.e. become visible on screen.
Create containers for all the images, and only load the actual images when they become visible on screen.
Another interesting solution can be found on this stack link. It is for all content but the code provided in an answer can be applied to image loading as well. Link
I have a layered div component which displays a successive series of large kb images by slide-animating away the top image to reveal the next image below. I'm trying to understand how best to approach this.
Approach 1:
layer a number of divs on top of each other, each with an image assigned as background, and slide away the divs as needed.
Will the hidden divs load their images on page load, or only when they are revealed? Is this browser/client specific behavior? Do all images (jpegs, pngs) behave the same way in this regard?
Approach 2:
Use only two divs- One that handles sliding, the other that will load and reveal the next image.
In this case, is it possible to pre-load the next image, so that the javascript isn't slowed down when the next image is revealed?
Thanks- and if anyone has other ideas, I'd love to hear them.
Your first approach, even if the images are 'hidden' via CSS, will load all images by all browsers via HTTP requests. Your second approach or some variant of it is probably better.
I'd recommend using AJAX to pull down each image as you go. It's definitely possible to preload the images.
You may want to consider existing slideshow/lightbox type of plugins for jquery or javascript. It's been done so many times you will sort of be recreating the wheel (unless it's more of a learning experience thing)..
Here's an interesting example of preloading with callbacks to alert you when it's ready. Maybe a good one to adapt?
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
The first approach certainly degrades better. It will leave the images available and visible if viewed on a CSS-challenged browser. But that comes at the cost of having to pull down all the images from the get-go. The second approach is lighter on the initial hit, at the cost increased code complexity swapping images in/out.
You can definitely pre-load images with Javascript. just create an image object and set its source to whatever you want, which will automatically trigger downloading of the image. It doesn't have to be inserted into the DOM or visible to the user to do this.
Hidden divs SHOULD load their content automatically, whether they're visible or not. I can't think of any PC-based browsers that wouldn't do this, but I'd hazard a guess that some browsers intended for resource-limited devices (cell phones for one) might optimize things and delay loading contents until the container's made visible, to save on network traffic.