_javascript technique of picture lazy loading based on javascript

I. Definition

Picture delay loading is also known as lazy loading, loading some pictures when the picture is delayed or meets certain conditions, and is usually used for pages with more pictures. You can reduce the number of requests or delay requests to optimize performance.

Ii. form of presentation

"1" delay loading, using settimeout or setinterval load delay, if the user left before loading, naturally will not be loaded.
The "2" condition loads, meets certain conditions, or triggers certain conditions before asynchronous loading begins.
"3" visual area loading, only load the user can see the area, the main monitoring scroll bar to achieve, generally close to the user to see the bottom when the load started, so that users can be pulled down when the picture just connected, there will not be too long pause.

Iii. Basic Steps

The pictures on the "1" page are all set to the same picture
"2" adds data-original = "Img/test.jpg" attribute to the picture, saving the real address of the picture
"3" when certain conditions are triggered, the SRC attribute of the picture of the area is automatically changed to the real address

Four, the application

1, click the button to show the picture

<! DOCTYPE html>
 
 

2, the visual area display picture

<!
DOCTYPE html>  

The above is the entire content of this article, I hope to help you learn, the smooth implementation of JavaScript pictures lazy loading.