The difference between javascript image preloading search and delayed loading is mainly reflected in the timing of image transmission to the client, both to improve user experience, and delayed loading is also called lazy loading.
The essence of the two technologies: the behavior of the two is opposite, one is early loading, one is lazy or even no loading. Lazy loading has a certain pressure-relieving effect on the front-end of the server, while pre-loading will increase the pressure on the front-end of the server.
Preloading: Load images ahead of time and render them directly from the local cache when the user needs to view them.
Implementation method: CSS (background), JS (Image), HTML (<img />) can be used. Commonly used is new Image(); set its src to achieve preload, and then use the onload method to call back the preload completion event. As long as the browser downloads the image to the local, the same src will use the cache, which is the most basic and practical preload method. When Image downloads the image header, it will get the width and height, so you can get the size of the image before preloading (the method is to use the timer to cycle through the width and height changes).
Lazy loading: The main purpose is to optimize the server front-end to reduce the number of requests or delay requests. It is very useful in some websites with a lot of pictures. Pictures outside the browser's visible area will not be loaded until the user scrolls the page. Only load them where they are, so long pages with many images can load faster and save server bandwidth. , Implementation methods:
1. The first is pure lazy loading, using setTimeOut or setInterval to delay loading.
2. The second is conditional loading, which starts asynchronous download only when certain conditions are met, or certain events are triggered.
3. There are also plug-ins in the jQuery plug-in to achieve this function.
4. The third is the visual area loading, that is, only the area that the user can see is loaded. This is mainly realized by monitoring the scroll bar. Generally, the loading will start at a certain distance before the user sees a certain picture, which can ensure that the user is loaded. Just pull down to see the picture.