• 原生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>

  • 相关阅读:
    Xcode Debugging
    GCD 深入理解
    iOS GCD编程
    iOS 面试之Block
    iOS SDWebImage 实现原理
    Block 初试
    通讯录
    UIScrollerView 的简单使用
    NSSet NSMutableSet的简单使用
    code
  • 原文地址:https://www.cnblogs.com/zhouyx/p/6714562.html
Copyright © 2020-2023  润新知