zoukankan      html  css  js  c++  java
  • 原生js可视加载图片、延迟加载、懒加载

    <script>
    //既视加载
    //var oBtn = document.getElementsByTagName('button')[0];
    var aImages = document.images;
    loadImg(aImages);
    window.onscroll = function () {
    loadImg(aImages);
    };

    function loadImg(arr){
    for (var i = 0, len = arr.length; i < len; i++) {
    // if(arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){

    //280为图片高度
    if(arr[i].getBoundingClientRect().top > -280 && arr[i].getBoundingClientRect().top < document.documentElement.clientHeight && !arr[i].isLoad){
    arr[i].isLoad = true;
    arr[i].style.cssText = "transition: ''; opacity: 0;"
    if(arr[i].dataset){
    aftLoadImg(arr[i],arr[i].dataset.original);
    }else{
    aftLoadImg(arr[i],arr[i].getAttribute("data-original"));
    }
    (function(i){
    setTimeout(function(){
    arr[i].style.cssText = "transition: 1s; opacity: 1;"
    },16)
    })(i);
    }
    }
    }

    function aftLoadImg(obj, url) {
    var oImg = new Image();
    oImg.onload = function(){
    obj.src = oImg.src;
    }
    oImg.src = url;
    }
    //end既视加载
    </script>

  • 相关阅读:
    CSP游戏 4
    CSP 交通规划
    CSP 地铁修建
    CSP 通信网络
    CSP URL映射
    CSP 权限查询
    CSP Markdown
    CSP JSON 查询
    SQL里的子查询
    SQL里的操作符
  • 原文地址:https://www.cnblogs.com/zhouyx/p/6714562.html
Copyright © 2011-2022 走看看