zoukankan      html  css  js  c++  java
  • 优化性能之图片的懒加载 (封成插件,可直接使用)

      //懒加载插件

      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();

  • 相关阅读:
    【C++】虚函数
    ZF-net
    bzoj1061【NOI2008】志愿者招募
    highcharts 绘制图标的JAVASCRIPT 类库 收藏
    C语言中的const,free使用方法具体解释
    Java Transaction Management
    从有序数组中查找某个值 low_bound
    [华为机试练习题]35.找零钱
    1.9算法入门之进制转换
    uboot移植rtc
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10603069.html
Copyright © 2011-2022 走看看