Detailed description of image lazy loading and preloading

This article talks about Pictures Lazy loading and preloading. If you don’t know about lazy loading and preloading of pictures or are interested in detailing lazy loading and preloading of pictures, then let’s come together. Take a look at this article. Okay, let’s cut the nonsense and get to the point!

1. Lazy loading

If you know a new thing, start with what and why. That is, if you want to understand the lazy loading technology of images, first understand what lazy loading is? Why do you need to use lazy loading?

1.1 What is lazy loading?

Lazy loading is also called delayed loading. When accessing a page, you need to first replace the background image of the img element or other elements with a default image (placement image), so that the browser renders the page. You only need to request it once. When the image appears in the visual area

of the browser, the real path of the image is set and the image is displayed.

1.2 Why use lazy loading of images?

When the number of pictures on the page reaches a certain number, and the size of the pictures is relatively large, such as various shopping mall websites, picture material websites, etc. If you

load all the images as soon as the page is loaded, it will obviously affect the loading speed of the website and increase the load on the server, and the user experience will definitely not be good. Then you can use laziness at this time. load.

1.3 The specific implementation principle of lazy loading

The reason why the img element in the page sends an http request is that the src attribute is set, otherwise The browser will not send a request to download the image. First, use a placeholder image to place all

pictures on the page, and set the src custom attribute under the element to store the real path of the picture. When needed, When taking out the real path dynamically

# is added to src.

2. Preloading

2.1. What is preloading?

Preloading means loading images in advance, and they can be rendered directly from the local cache when the user needs to view them.

2.2 Why use preloading?

When the picture on the page is relatively large, the area will be blank when the page is loaded or the picture will be loaded slowly. In order to improve the user experience, it is necessary

These pictures should be loaded into the cache in advance. When the user opens the page, these pictures will be displayed quickly to obtain a better user experience.

2.3 What are the implementation methods?

Method 1: Use css and JavaScript

to implement preloading

Method 2: Only Use JavaScript

Implement preloading

Method 3: Use ajax to implement preloading

3. The difference between lazy loading and preloading and Specific implementation method

The behavior of the two technologies is opposite, one is loading in advance, and the other is lazy loading or no loading. Lazy loading is good for the server and can relieve a certain amount of pressure

. Preloading, on the other hand, will increase the load on the server.

The specific implementation method of lazy loading:

1. The first one is pure Delayed loading, use setTimeOut or setInterval for delayed loading.

2. The second is conditional loading, which meets certain conditions or triggers certain events

Just start the asynchronous download.

3. The third is to load the visual area, that is, only load the area that the user can see. This is mainly achieved by monitoring the scroll bar. Generally, it will be loaded when the user sees a certain area. Start loading by

# at a certain distance before the image, so as to ensure that the user can see the image when he pulls it down.

The specific implementation method of preloading:

There are many ways to implement preloading, such as: Use CSS and JavaScript to implement preloading; use JavaScript only to implement preloading; use Ajax to implement preloading.

Commonly used is new Image(); set its src to achieve preloading, and then use the onload method to call back the preloading completion event. As long as the browser downloads the image locally, the same src will

be cached. This is the most basic and practical preloading 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 a timer to cycle through the width and height changes.

The above is all the content of this article. If you don’t know much about it, you can easily master it by yourself! ##Related recommendations:

jquery’s Lazy loading

principle and implementation

JS Preloading

VideoAudio/Video screenshot sharing tips

The above is the detailed content of Detailed description of image lazy loading and preloading. For more information, please follow other related articles on the PHP Chinese website!