A large number of pictures on a page (large e-commerce site), loading very slow, you have ways to optimize the loading of these images, to give users a better experience

Picture lazy loading, in the non-viewable area of the page can add a ScrollBar event, to determine the location of the image and the top of the browser distance from the page, if the former is less than the latter, priority loading.

If you have a slideshow, photo album, and so on, you can use the picture preload technology to download the previous and next first pictures of the current display.

If the picture is a CSS picture, you can use Csssprite,svgsprite,iconfont, Base64 and other techniques. If the picture is too large, you can use a specially encoded image that loads with a specially compressed thumbnail to enhance the user experience.

If the picture display area is smaller than the true size of the picture, the image is compressed and the size is consistent with the display, because the image is compressed on the server side according to business needs.

A large number of pictures on a page (large e-commerce site), loading very slow, you have ways to optimize the loading of these images, to give users a better experience