zoukankan      html  css  js  c++  java
  • js页面可视区域懒加载

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        margin: 0;
    }
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    img{
        border: none;
        vertical-align: middle;
    }
    .in{
        border: 1px solid black;
        margin: 10px;
        text-align: center;
        height: 400px;
         400px;
        float: left;
    }
    .in img{
        height: 400px;
         400px;
    }
    </style>
    </head>
    <body>
    <ul class="list">
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>    
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img1.gif"></li>
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img2.gif"></li>
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img3.gif"></li>
        <li class="in"><img src="img/loading.gif" alt="测试" data-original = "img/img4.gif"></li>                           
    </ul>
    
    <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){
                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;
    }
    
    </script>    
    </body>
    </html>
  • 相关阅读:
    hdu 5036 概率+bitset
    hdu 5037 周期优化
    hdu 5038 求出现次数最多的grade
    hdu 5040 bfs
    hdu 5045 N个人做M道题的正确率
    hdu 5046 二分+DLX模板
    hdu 5047 大数找规律
    c:set注意事项
    It is indirectly referenced from required .class files(导入项目报错原因与解决方法)
    oracle-01722,函数subtr,instr
  • 原文地址:https://www.cnblogs.com/yuri2016/p/7838432.html
Copyright © 2011-2022 走看看