优化性能之图片的懒加载 （封成插件，可直接使用）

　　//懒加载插件

　　function imgload(){
　　　　var img=document.getElementsByTagName("img");
　　　　//所有图片加载；
　　　　function loas(){
　　　　　　for(var i=0;i<img.length;i++){
　　　　　　　　if(img[i].lasd==true){
　　　　　　　　　　continue;
　　　　　　　　}
　　　　　　　　lazyimg(img[i])
　　　　　　}
　　　　}
　　　　//让其拥有延迟的感觉
　　　　setTimeout(function(){
　　　　　　loas();
　　　　},1000)
　　　　//必不可少的滚动条事件
　　　　window.οnscrοll=function(){
　　　　　　loas();
　　　　}
　　　　// 单张图片的加载
　　　　function lazyimg(ele){
　　　　　　var swidth=document.documentElement.scrollTop+document.documentElement.clientHeight;
　　　　　　var ding=offset(ele).boto+ele.offsetHeight; //测试时加上ele.offsetHeight,查看问题,实际操作中不需要；
　　　　　　if(swidth>ding){
　　　　　　　　if(ele.lasd==true){
　　　　　　　　　　return;
　　　　　　　　}
　　　　　　　　var img=new Image;
　　　　　　　　img.src=ele.getAttribute("xsrc");
　　　　　　　　img.οnlοad=function(){
　　　　　　　　　　ele.src=img.src;
　　　　　　　　}
　　　　　　　　ele.lasd=true;
　　　　　　}
　　　　}
　　　　// 元素相对body的定位
　　　　function offset(ele){
　　　　　　var le=ele.offsetLeft;
　　　　　　var to=ele.offsetTop;
　　　　　　var parent=ele.offsetParent;
　　　　　　while(parent){
　　　　　　　　le+=parent.offsetLeft;
　　　　　　　　to+=parent.offsetTop;
　　　　　　　　parent=parent.offsetParent
　　　　　　}
　　　　　　return {bole:le,boto:to};
　　　　}
　　}
　　imgload();

转载于:https://www.cnblogs.com/shangjun6/p/10603069.html