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

  • 相关阅读:
    AsyncTask的用法
    关于 android setAnimationStyle 的问题
    android有关bluetooth常用api简介
    Android调用系统Activity选取图像部分区域
    Android 关于ListView几个特别的属性
    Android应用界面动画切换(主要Tabhost中跳转出来的动画效果解决[转]
    ✿Android 3.1 久违的 USB、mtp、rtp
    读《C++沉思录》心得:拷贝构造函数
    Cloud Foundy入门
    HDFS读文件详解
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10603069.html
Copyright © 2011-2022 走看看