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

  • 相关阅读:
    创建线程的三种方式
    SpringMVC:拦截器和POST中文乱码问题
    SpringMVC:静态资源访问
    SpringMVC :转发、重定向、RedirectAttributes
    SpringMVC:Controller的编写
    SpringMVC——DispatcherServlet
    SpringMVC的执行流程
    第一个SpringMVC程序(注解实现)
    第一个SpringMVC程序
    springsecurity学习
  • 原文地址:https://www.cnblogs.com/shangjun6/p/10603069.html
Copyright © 2011-2022 走看看