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;
    };

  • 相关阅读:
    java中获取类加载路径和项目根路径的5种方式分析
    浅谈HTTP中Get与Post的区别
    Http请求工具类 httputil
    Java中遍历数组的三种方式复习
    关于if else 和 三目运算符的效率问题-java
    EXCEL设置三级下拉框
    Java Web前端到后台常用框架介绍
    Shiro学习(总结)
    Shiro学习(24)在线回话管理
    使用jsr303实现数据校验
  • 原文地址:https://www.cnblogs.com/zhoudawei/p/6970725.html
Copyright © 2011-2022 走看看