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

  • 相关阅读:
    案例8高级打砖块游戏
    案例17——Flash地图应用
    案例11——用遮障制作聚光灯效果及冷却动画
    案例1:用Flash CS工具制作进度条
    Flex 中可以应用于 ActionScript 类的元标签
    案例7用Flash Builder做虚拟计算器
    案例16——没特效还玩毛个Flash
    案例9不要在加载时面对苍白的屏幕
    案例15——游戏物品栏的制作(AS3高级应用)
    案例2心跳模拟
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10603069.html
Copyright © 2011-2022 走看看