In terms of performance, what is the best way to show 1000 images per page?

Question

I am trying to show 1000 fairly small images per page (quite a lot, but out of control).

When loading them immediately, performance clearly suffers from rendering 1000 images at once.

I tried to implement the src application while scrolling (in numerous quantities - scrolling 250 pixels, loading 25 images, etc.), and then trying to load images by timer.

These methods have helped improve productivity, but what would be the most efficient way to do this? They seem to still have an annoying amount of lag - I understand that there is a fundamental problem with displaying many images on one page, but is there a better solution?

EDIT:

The markup, of course, would help, but this is not an option. In addition, images are pulled from the API, so it is not convenient to make 1 large image / use sprites.

Answer 1

Since sprites / pagination were not an option in this situation, I found the following best solution:

Adaptation of the method of loading images by scrolling with some settings and cool adjustment of the parent element for each image (so that for each image there are 1000 elements, each with images).

If the parent elements default to display:none , and also do 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 following 50 elements to display:block and switches the <img role> to <src> (the image URLs were placed in the role when rendering the page) each time the user scrolls 250 pixels.

Answer 2

If all images are unique files, you feel very successful at creating several connections to receive them. You can create 1 "main" image of all elements, and then create 1000 divs each with a different class or identifier, and then in css determine the background offsets for each. This method is often called css sprites.

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

Answer 3

Could you do an AJAX pagination that dynamically loads images based on page number? For example, 25 images per page. When you request the first page, you dynamically load the next page and so on. Thus, the user will not notice the delay .. This is all you can do to improve performance even more!

Answer 4

Here's the answer from another angle:

Could you combine the server side images and make them in rows, maybe? Although this is likely to work only in certain circumstances.

Answer 5

Well, I think the best solution would be to make them the way the user sees them. those. your scrolling approach. This would mean downloading as many images as the user saw, and not all of them at once. If, as you say, it is not under your control; then the use of pages is out of the question? This will be the best approach overall.

The fact that many images inevitably cause a lot of delays, because it will use a large amount of bandwidth and probably memory.