Why does Chrome load so many (≈130) png images so slowly?

Im creates a page / application representing a wide range of products. One view contains a line of about 130 products, an eash represented by a png image, the size varies from 33Kb to 150Kb.

The line can be scrolled horizontally using the user scroll panel or a custom controller, and when you aim at each product, I use som css-transistions to wash all products except one that hangs and increase it.

It works fine in Safari and decently Firefox, and in Chrome, while I hold the image countdown. But the more images I try to add, both scrolling and transistors gradually slow down until it is almost impossible to work with them.

Is this some cache.problem problem in chrome? Is there any way around this?

I tried to preload the images, but the problem is not the image loading time, but its performance, which seems to stop due to the large number of images.

+6
source share
1 answer

You can combine all your small images into one large image and upload ONLY a large image, so you only make ONE HTTP request. To display, you must set the offset (background-position property) for each image using css.

Textbook

+2
source

Source: https://habr.com/ru/post/908336/


All Articles