I'm trying to show 1000 quite small images on a page (rather a lot indeed but out of my control).

When loading them all at once, the performance obviously suffers drastically rendering 1000 images at once.

I tried implementing applying the image src upon scroll (at numerous amounts - 250px scroll, 25 images load etc.), then tried loading the images on a timer.

These methods did help to increase performance but what would be the most efficient way to do this? They seemed to still have an irritating amount of lag - I understand there is a fundamental problem with rendering that many images on one page, but is there a better solution?

EDIT:

Pagination of course would help but isn't an option here. Also, the images are pulled from an API so it's not convenient to make 1 large image / use sprites.

I'm trying to show 1000 quite small images on a page (rather a lot indeed but out of my control).

When loading them all at once, the performance obviously suffers drastically rendering 1000 images at once.

I tried implementing applying the image src upon scroll (at numerous amounts - 250px scroll, 25 images load etc.), then tried loading the images on a timer.

These methods did help to increase performance but what would be the most efficient way to do this? They seemed to still have an irritating amount of lag - I understand there is a fundamental problem with rendering that many images on one page, but is there a better solution?

EDIT:

Pagination of course would help but isn't an option here. Also, the images are pulled from an API so it's not convenient to make 1 large image / use sprites.

• javascript
• jquery
• performance

• 1 Would CSS sprites help you somewhat? – Piskvor left the building Commented Sep 9, 2011 at 14:00
• possible duplicate of lazy load plugin to load images as user scrolls? – home Commented Sep 9, 2011 at 14:02

5 Answers 5

If all the images are unique files then you are feeling the big hit from making multiple connections to retrieve them. You could create 1 "master" image of all the items and then create 1000 divs each with a different class or id then in css define background offsets for each. This method is often refered to as css sprites.

http://css-tricks./158-css-sprites/

Couldn't you make an AJAX pagination, that dynamicly loads the images based on page number? For example, 25 images per page. On requesting the first page, you dynamicly load the next page and so on. That way, the user won't notice the delay.. That's all you can do to improve the performance even further!

Here's an answer from another angle:

Could you bine the images on the server-side and render them in lines perhaps? Though this will probably only work in certain circumstances.

Well, I think the best solution would be to render them as the user sees them. i.e. Your scrolling approach. This would mean only loading as many images as the user has seen and not all of them at once. If, as you say, it is out of your control; then using pages is out of the question? That would be a better approach on the whole.

That many images is bound to cause a lot of lag anyway, as it will use a high amount of bandwidth and likely memory as well.

Since sprites/pagination weren't an option in this situation, I found the following the best solution:

Adapting the 'load images on scroll' method, with some tweaks and cruically setting the parent element for each image (so there are 1000 elements, each with images) to display:none.

With the parent elements defaulted to display:none & also making the first 25 display:block:

var scrollPos = 0; var endEle = 0;

$(window).scroll(function(){

scrollPos = $(window).scrollTop();

    if  ($(window).scrollTop() < scrollPos + 250) {

       //load 15 images.

       $('.myDiv img').slice(endEle,endEle+50).each(function(obj){
            var self = $(this);
            var url = self.attr("role");
            self.attr("src", url);
            self.parent().css("display","block");
       });

       endEle = endEle + 50;

    }

});

This sets the next 50 elements to display:block and switches the <img role> into <src> (the image urls were put into role when the page is rendered) every time the user scrolls 250px.