Lazy loading and preloading of JavaScript images

1. The concept of slow-loading and preload

These techniques are not limited to picture loading, but we first discuss the most commonly used picture loading.

• Slow load: Load some pictures when you delay loading pictures or if certain conditions are met.
• Preload: Load images in advance and render directly from the local cache when users need to view them.

The essence of both technologies: the behavior of the two is the opposite, one is the pre-loading, the other is lazy and not even loaded. The slow load can relieve the pressure on the front end of the server, and preload will increase the pressure on the front of the server.

2. The significance and realization of the slow load

The primary purpose of the slow load is to optimize the server front-end to reduce the number of requests or requests for delays.

It is mainly embodied in three modes:

• The first is a purely lazy load, with settimeout or setinterval loading delays, and if the user leaves the page before loading, it will not load.
• The second is conditional loading, meeting certain conditions, or triggering some events before starting an asynchronous download.
• The third is the visual area loading, that is, only load the user can see the area, which is mainly implemented by the monitoring scroll bar, generally in the user to see a certain distance before the beginning of the load, so that the user can be pulled down to see the picture.

3. The meaning and implementation of preloaded

Preload can be said to sacrifice server front-end performance in exchange for a better user experience, so that users can be the fastest way to reflect the operation. There are many ways to implement preload, which can be used with CSS (background), JS (Image), and HTML (). The new Image () is commonly used, the SRC is set to implement the preload, and the OnLoad method is used to callback the preload completion event. As long as the browser to download the image locally, the same src will use the cache, which is the most basic and most practical preload method. When image finishes downloading the image header, it gets the width and height, so you can get the size of the picture before preloading (the way I know it is to change the width and height of the timer wheel). The general implementation of the pre-loaded tool class, all implement an array to save the required pre-loaded URLs, and then achieve the finish, Error, Sizechange and other common events, can be selected by the user is sequential preload or false concurrent preload.

4. Class Library

The lazy load of jquery is used for picture ease, and jquery's preload can be used for preload.

5. Expand to non-image

Extended non-picture, mainly in div for example. An implementation design pattern: We add a proxy class to the div that needs to be loaded, so that once the load event is triggered, the proxy class is automatically called to update the data. The div that needs to be loaded is then put into a collection, the amount of scrolling is calculated, an offset is set, and then the browser scroll bar is set to monitor it for dynamic ease

Lazy loading and preloading of JavaScript images