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

  • 相关阅读:
    ubuntu 卸载干净软件(包括配置文件)
    Unable to lock the administration directory (/var/lib/dpkg/) is another process using it?
    linux watch 命令
    [转]如何成为优秀的程序员?
    【转】css浮动元素的知识
    Hierarchical data in postgres
    【转】supervisord使用
    手动安装pip
    zoj1649-Rescue (迷宫最短路径)【bfs 优先队列】
    poj3278-Catch That Cow 【bfs】
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10603069.html
Copyright © 2011-2022 走看看