Javascript-based image lazy loading and javascript-based loading

Javascript-based image lazy loading and javascript-based loading

I. Definition

Image delayed loading is also called lazy loading. It is used to load some images only when the image is delayed or meets certain conditions. It is usually used for webpages with many images. It can reduce the number of requests or the number of delayed requests and optimize the performance.

Ii. presentation form

[1] Delayed loading. setTimeout or setInterval is used for loading delay. If the user leaves before loading, the loading will naturally not be performed.
[2] Conditional loading: starts asynchronous loading only when certain conditions are met or certain conditions are triggered.
[3] The visible area is loaded, and only the area that the user can see is loaded. This is mainly implemented by the monitoring scroll bar. Generally, loading starts when the user sees the bottom edge very close, this ensures that the image will not be paused for a long time when the user pulls down the image.

3. Basic Steps

[1] All images on the webpage are set to the same image
[2] Add the data-original = "img/test.jpg" attribute to the image to save the real address of the image.
[3] when certain conditions are triggered, the src attribute of the image in the region is automatically changed to a real address.

Iv. Application

1. click the button to display the image

<! DOCTYPE html> 
2. display images in the visible area
<! DOCTYPE html> 
The above is all the content in this article. I hope it will be helpful for your learning and smooth javascript image lazy loading.
Articles you may be interested in:

 
Jquery. LazyLoad. js Revised Version Download to implement image delayed loading plug-in
 
Implementation principle and process of rolling delayed loading of images on native Js pages
 
Implementation methods and ideas of js image delayed Loading
 
How to Use the jquery plug-in lazyload. js to delay image loading
 
How to Use the Jquery. lazyload. js extension for jquery image delayed Loading
 
Summary of javascript Implementation of image delayed loading methods (three methods)