Big load (lag) while loading page because of images

Question

I'm facing this issue right now. When my page loads up (DOM) I call a function which returns 1880 images and those images are being stored in steam server.

Those images are being added to my DOM just after the callback which returns me array response with 1880 elements (links to images and some info). After the callback those images are being built into DOM as mentioned before.

This method cause a big LAG on website (over 20 seconds freezing). Is there any option to run something? How to deal with this?

Answer 1

a solution would be to only load the images you need. I highly doubt that the user can see 1880 images at once.

After you page loads you can use any framework to send an asycronous js request to you server for the rest of your images.

Example:

-When the page loads there are only 10 images (lets say that is how much the user sees at once on the screen)

-When the user starts to scroll he should see new images. So onscroll you launch your ajax request for 10 new images.

-Repeat whenever the user scrolls

Of course, depending on what you try to do the steps above need to be adapted / optimesed differently

Answer 2

I suggest getting 3 sprite sheets at different resolutions, load the best one for the user's screen size, and use event delegation to put click events on each sprite. That should address everything you've mentioned in your question and in the comments.