Lazy Loading lazy load

Lazy Loading (load on Demand) is a unique and powerful method of data acquisition that automatically gets more data when the user scrolls the page.

And the new data will not affect the display of the original data, while minimizing the server-side resource consumption.

For example, when the user scrolls to the corresponding location, display the corresponding picture, otherwise do not load!!!

Here is an example of lazy loading of pictures.

This HTML file contains a number of div tags, a div tag to add a sub-label img To display a picture, if the page loaded all from the service

download picture on server side resources, is undoubtedly very time-consuming, so we will take the picture lazy loading, so that the user to scroll to the current position to load the location of the diagram

Chip

First, in HTML we want to save the resource address of the picture with the help of the custom attribute Data-src

That is, all the div tags to display the picture plus a data-src property

<Divclass= "Lazydone"data-src= "http//Your picture resource address 0"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 1"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource Address 2"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 3"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 4"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 5"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 6"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 7"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 8"></Div><Divclass= "Lazydone"data-src= "http//Your picture resource address 9"></Div>

In our JS can be processed to identify these with the data-src tag Div. It then calculates the distance from the top of the page to determine whether the user

Scroll to that position, if reached then remove its DATA-SRC value, create a sub-label IMG, assign the value of the DIV's data-src to the SRC attribute of the IMG.

The IMG tag is then displayed so that the user can see the corresponding image in that location.

functionsetimg ($obj) {varsrc = $obj. getattribute ("Data-src"); varimg = document.createelement ("img"); IMG.SRC=src; if($obj. Children.length = = 0){        //loaded the first time you scroll to this location, and then the resource has been downloaded without adding it repeatedly$obj. appendchild (IMG); }}//get object distance from top of page functiongetheight ($obj) {varh =$obj. Offset (). Top; returnh; }window.onscroll=function(){     var$div = $ (". Lazydone");  for(vari = 0; I < $div. length; i++) {          var$odiv =$div [i]; //Check if the $odiv is in the viewable area        vart = document.documentElement.clientHeight + (Document.documentElement.scrollTop | |Document.body.scrollTop); varh =gethegiht ($ODIV); if(H <t) {setimg ($odiv); }      }    }; 

Lazy Loading lazy load