Home > Developer > Web Develop
HTML code:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>lazyload-leawee</title> </Head> <Body> <BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/> <imgsrc= "Img/hbuilder.png"data-src= "img/+ attention. jpg"class= "lazy" /> <BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/> <imgsrc= "Img/hbuilder.png"data-src= "img/2008 year works. jpg"class= "lazy" /> <BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/> <BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/><BR/> <imgsrc= "Img/hbuilder.png"data-src= "img/2009 year works. jpg"class= "lazy" /> </Body></HTML>
JS Code:
<script type= "Text/javascript" >varloaded = [];/*whether the label is loaded*/ varobj = Document.getelementsbyclassname ("lazy");/*lazy lazy Load picture*/ for(vari = 0; i < obj.length; i++) {Loaded.push (false); } varClienthight = Window.innerheight | | Document.documentElement.clientHeight;/*browser window Height*/ functionScrollhandler (index) {varFlag =true;/*whether or not the target element is full, and once it is not shown, the elements in the back are not sufficient to stop the loop*/ varscrolltop = Document.body.scrollTop | | Document.documentElement.scrollTop;/* Scroll away from the top distance * / for(vari = index; I < obj.length && flag; i++) { varoffset = obj[i].offsettop;/*the offset of the element to the top*/ if(ScrollTop + clienthight >offset) {OBJ[I].SRC= Obj[i].getattribute ("data-src");/*give a picture a real address*/Loaded[i]=true;/*The logo is already loaded*/ } Else{flag=false; } } } functionMyscrolllistener () {varStart = Loaded.indexof (false);/*find the location of the first picture that is not loaded*/ if(Start >-1) {Scrollhandler (start); }} Window.onscroll=Myscrolllistener; </script>
The above code has been completely able to implement the web's lazy record.
Reprint Please specify source: Http://home.cnblogs.com/u/Leawee
JS Implementation Lazy Loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
