Pictures can bring a better display effect to the page, and at the same time can convey richer information to users. There are two typical problems with displaying images on a page:
- Images are initially hidden, but should be shown immediately when needed (e.g. carousels, album presentations, slideshows)
- The web page is very long, and there are a lot of images on the web page (such as the product list in the e-commerce website), but these images may not be seen by users. If the user does not scroll the page to view these images, the loading of these images will be become a waste.
Solving these two types of problems requires the use of image preloading and lazy loading techniques.
Image preloading is to let the browser load the image before the image is displayed, so that when the browser really needs to display the image, it can be displayed instantly without downloading and decoding. Image preloading typically uses the Image object to load images into memory. The Image object is actually an <img> tag, just not appended to the page.
Lazy loading of pictures is to let the pictures in the lower part of the web page display the same loading picture first. When the page scrolls down and these pictures are exposed, the src of the img tag is changed to the correct picture address, and then the browser goes to Download the image and decode it to display on the page. The key to lazy image loading is to monitor the scrolling of the page and the window size variables and calculate whether the image is in the window work area (that is, the user can see it). There are many image lazy loading plugins or standalone scripts like:
jQuery.lazyload.js
echo.js