Home >Web Front-end >JS Tutorial >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!
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?
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?
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
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.2 Why use preloading?
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 3: Use ajax to implement preloading
3. The difference between lazy loading and preloading and Specific implementation method
. 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
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: JS Preloading
jquery’s Lazy loading
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!