zoukankan      html  css  js  c++  java
  • 原生javascript代码懒加载

    1.先定义需要懒加载的样式;

    class="lazyload"

    2.设置初始透明度为0.1;

    .lazyload{

      filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1;

    }

    3.把真正需要加载的真实地址放在data-src属性中;

    src="懒加载图片.png" data-src="真实图片";

    4.

    前端开发周大伟同学JavaScript代码编写:

    // 懒加载
    function lazyLoad(){ 
      if (window.addEventListener){
        window.addEventListener("load",loading);
        window.addEventListener("click",loading);
        window.addEventListener("scroll",function(){
          setTimeout(loading,100);
      });
      } else if (window.attachEvent) {
        window.attachEvent("onload",loading);
        window.attachEvent("onclick",loading);
        window.attachEvent("onscroll",function(){
          setTimeout(loading,100);
        });
      }
    }

    function loading(){
      var lazyload=document.getElementsByClassName("lazyload");
      for(var i=0;i<lazyload.length;i++){
        var _this=lazyload[i];
        var clientHeight=document.documentElement.clientHeight || document.body.clientHeight;
        var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
        if(clientHeight+scrollTop>=offsetTop(_this)){
          _this.setAttribute("src",_this.getAttribute("data-src"));
          _this.style.opacity=1;
        }
      }
    }

    //获取offsetTop和offsetLeft值的js代码(兼容)
    function offsetTop( elements ){
      var top = elements.offsetTop;
      var parent = elements.offsetParent;
      while( parent != null ){
        top += parent.offsetTop;
        parent = parent.offsetParent;
      };
      return top;
    };

  • 相关阅读:
    BZOJ 1907: 树的路径覆盖
    BZOJ 1295: [SCOI2009]最长距离
    BZOJ 1303: [CQOI2009]中位数图
    BZOJ 1468: Tree
    BZOJ 3784: 树上的路径
    BZOJ 2006: [NOI2010]超级钢琴
    BZOJ 1831: [AHOI2008]逆序对
    BZOJ 2521: [Shoi2010]最小生成树
    HDU 6685 Rikka with Coin (枚举 思维)
    HDU 6659 Acesrc and Good Numbers (数学 思维)
  • 原文地址:https://www.cnblogs.com/zhoudawei/p/6970725.html
Copyright © 2011-2022 走看看