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 ?

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 ?

• javascript
• html
• css

• 2 also interested in this question. – Grunf Commented May 24, 2012 at 10:11
• images are tiny 18x18 px – xRobot Commented May 24, 2012 at 10:12
• 1 Use css sprites – Esailija Commented May 24, 2012 at 10:13
• I can't use css sprite because images are loaded dinamically – xRobot Commented May 24, 2012 at 10:25
• What difference does that make – Esailija Commented May 24, 2012 at 10:26

5 Answers 5

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 ments, 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/Guffa/gzFFN/

http://code.google./p/jquery-appear/

jQuery appear event that is triggered when objects "appear" i.e. bee visible on screen.

Create containers for all the images, and only load the actual images when they bee 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