优化性能之图片的懒加载 (封成插件,可直接使用)

  //懒加载插件

  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.onscroll=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.onload=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