Lazy Loading--loading technology of web images

At present, the major forums on the network, especially some of the image types of the site, in the picture loading, all adopt a way called lazy loading. The specific performance is: When the page is requested, only load the visual area of the picture, the other parts of the picture is not loaded, only these pictures appear in the visual area, will be dynamically loaded these pictures, thus saving bandwidth, improve the speed of the initial load. The specific implementation is as follows:

First, in the page to prepare a div for Div1 Div, in this div put a ul,lu to prepare some Li, these li have a data-src attribute, prepare the address of the picture, the concrete structure is as follows:

    <div id= "Div1" >         <ul >            <li data-src= "/http T03.pic.sogou.com/7620cd6e740c3c50.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/2c67d8e270eb61c3.jpg" ></li>             <li data-src= "/http T01.pic.sogou.com/9c9d058c0c731087.jpg "></li>             <li data-src= "Http://t02.pic.sogou.com/007da8d5456bc0ab.jpg" ></li>             <li data-src= "/http T03.pic.sogou.com/64d939a5456bc0ab.jpg "></li>             <li data-src= "http://t03.pic.soGou.com/95eb5da5456bc0ab.jpg "></li>             <li data-src= "Http://t04.pic.sogou.com/5c3fa2b5456bc0ab.jpg" ></li>             <li data-src= "http://t03.pic.sogou.com/ F6443925456bc0ab.jpg "></li>             <li data-src= "Http://t04.pic.sogou.com/f96780b5456bc0ab.jpg" ></li>             <li data-src= "http://t03.pic.sogou.com/ 54a75d2e740c3c50.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/3b173ee50fdad689.jpg" ></li>             <li data-src= "http://t03.pic.sogou.com/ 95eb5da5456bc0ab.jpg "&GT;&LT;/LI&GT;&NBSP;&NBSP;&NBSP;&NBSP;&NBsp;       <li data-src= "http://t04.pic.sogou.com/ 5c3fa2b5456bc0ab.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/f6443925456bc0ab.jpg" ></li>             <li data-src= "http://t04.pic.sogou.com/ F96780b5456bc0ab.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/54a75d2e740c3c50.jpg" ></li>             <li data-src= "http://t03.pic.sogou.com/ 3b173ee50fdad689.jpg "></li>             <li data-src= "Http://t01.pic.sogou.com/b0e3d909c131e9cb.jpg" ></li>             <li data-src= "HTTp://t02.pic.sogou.com/27e362d461029a95.jpg "></li>             <li data-src= "Http://t02.pic.sogou.com/ddfb62d6f09be522_i.jpg" ></li>             <li data-src= "/http T01.pic.sogou.com/9448c50e46a53e65.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/b7e5a7e50fdad689.jpg" ></li>             <li data-src= "/http T03.pic.sogou.com/3825466e4e3b9ce4.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/1d7d602e740c3c50.jpg" ></li>             <li data-src= "/http T02.pic.sogou.com/085ea3d5456bc0ab.jpg "></li> &nbSp;          <li data-src= "http://t04.pic.sogou.com/ Ad61be7270eb61c3.jpg "></li>             <li data-src= "Http://t04.pic.sogou.com/ed7705b270eb61c3.jpg" ></li>             <li data-src= "http://t04.pic.sogou.com/ 491c4cb461029a95.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/e603c6ae4e3b9ce4.jpg" ></li>             <li data-src= "http://t01.pic.sogou.com/ 6b6a148cdc19fbb4.jpg "></li>             <li data-src= "Http://t01.pic.sogou.com/c301bac9f514c378.jpg" ></li>             <li&Nbsp;data-src= "Http://t01.pic.sogou.com/11a6ce8e4e3b9ce4.jpg" ></li>             <li data-src= "Http://t04.pic.sogou.com/41b26435456bc0ab.jpg" ></li>            <li data-src= " Http://t03.pic.sogou.com/adb811acdc19fbb4.jpg "></li>             <li data-src= "Http://t03.pic.sogou.com/fbb08be9c131e9cb.jpg" ></li>             <li data-src= "/http T01.pic.sogou.com/b2ecd2ce4e3b9ce4.jpg "></li>             <li data-src= "Http://t04.pic.sogou.com/0509bff02200e0a5.jpg" ></li>             <li data-src= "/http T04.pic.sogou.com/0509bff02200e0a5.jpg "></Li>            <li data-src= "/http T04.pic.sogou.com/e655c4fe49cac8ea.jpg "></li>             <li data-src= "Http://t01.pic.sogou.com/5251ca4e740c3c50.jpg" ></li>             <li data-src= "/http T03.pic.sogou.com/7fe86f66ce211acb.jpg "></li>             <li data-src= "Http://t04.pic.sogou.com/541569b5df134ca6.jpg" ></li>             <li data-src= "/http T01.pic.sogou.com/d34a3f0e46a53e65.jpg "></li>             <li data-src= "Http://t02.pic.sogou.com/78bca85270eb61c3.jpg" ></li>         </ul>    </div> 

     images are dynamically loaded by reading the LI element and then getting the value of the LI element's data-src attribute to the SRC of the dynamically created picture, thus creating the picture.

function setimg (index) {     VAR ODIV = DOCUMENT.GETELEMENTBYTD ("Div1");    var oul =  odiv.children[0] ;    var olis = oul.children ;     //HTML5 new features     if (Olis[index].dataset) {         var src = oLis[index].dataset.src ;    }else{         var src = olis[index].getattribute ("Data-src");     }        var oimg = document.createelement ("img") ;     oimg.src = src ;    if (oLis[index].children.length  == 0) {        olis[index].appendchild (OIMG);     }} 

So, how do you recognize it in the viewable area? A function is needed to get the current element distance from the top of the page:

Gets the distance of the object from the top of the page function Geth (obj) {var h = 0;        while (obj) {h + = Obj.offsettop;    obj = obj.offsetparent; } return h;}

When the page scroll bar scrolling, always judge the current position of Li:

Window.onscroll = function () {    var odiv =  DOCUMENT.GETELEMENTBYTD ("Div1");    var oul = odiv.children[0] ;     var olis = oul.children ;    for (var i=0;i< olis.length;i++) {        var oli = olis[i] ;         //Check if the Oli is in the viewable area         var  t = document.documentElement.clientHeight +  (Document.documentElement.scrollTop  | |  document.body.scrolltop);         var h =  Geth (oLi);         if (h<t) {             settimeout ("Setimg (" +i+ ")", ";         }     }} 

When the page is loaded, take the initiative to run the Window.onscroll to get the picture in the current viewable range.

Window.onload = function () {window.onscroll ();}

In addition, like this page, camouflage and landscaping are necessary, rather: give each li a loading picture as the background, so as to achieve the current picture loading effect, beautify the work is to do a reasonable layout.

* {    margin;0;     padding:0;} #div1  {    width: 520px;    margin: 30px auto;     border: 1px solid red;    overflow: hidden;} li {    width: 160px;    height: 160px;     float: left;    list-style: none;    margin:  5px;    background: url (loading.gif)  center center no-repeat;     border: 1px dashed green;} 

At this point, a current network prevalence of lazy loading picture technology has been completed. In addition, the source of the image can be obtained by means of Ajax, here just provides a way of thinking, can be free to play ...

Lazy Loading--loading technology of web images