关于JS实现延迟加载

最新推荐文章于 2023-02-16 19:23:33 发布

置顶寓言s

最新推荐文章于 2023-02-16 19:23:33 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/u011551941/article/details/38052003

版权

不多说直接上代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       *{
         margin: 0px;
         padding: 0px;
        - webkit - box - sizing: border - box;
         - moz - box - sizing: border - box; 
         - ms - box - sizing: border - box;
          box - sizing: border - box;
       }
       li{
          margin: 35px;
          list-style-type: none;
          float: left;
       
       }
       .box li img{
          opacity: 0;
        }   
    </style>
    <script>
function getByClass(oparent,oclass){
    try {
        return oparent.querySelectorAll("." + oclass);
    } catch (ex){
        var reset = [];
        var reg = new RegExp("\\b" + oclass + "\\b");
        var oCur = oparent.all;
        for (var i = 0; i < oCur.length; i++) {
            if (reg.test(oCur[i].className)) {
                reset.push(oCur[i]);
            }
        };
        return reset;
    }
}
function getStyle(obj,name){
     if(obj.currentStyle){
      return obj.currentStyle[name];
     }else{
      return getComputedStyle(obj,false)[name];
    }
   }
function Stratmove(obj,json,funEnd){
       clearInterval(obj.timer);
       obj.timer=setInterval(function(){
       for(var attr in json){
        var bStop=true;
        var curr=parseInt(getStyle(obj,attr));
        var spped=0;
        if(attr=="opacity"){
           var curr=Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
           curr=parseInt(getStyle(obj,attr));
        }
        spped=(json[attr]-curr)/8;
        spped=spped>0?Math.ceil(spped):Math.floor(spped);
        if(curr!=json[attr]){
           bStop=false;
        }
          if(attr=="opacity"){
               obj.style.opacity=(curr+spped)/100;
             }else{
               obj.style[attr]=curr+spped+"px";
            }
          if(bStop){
          clearInterval(obj.timer);
          if(funEnd)funEnd();
         }
     }
   },30)
}
window.οnlοad=function(){
           var box=getByClass(document,"box")[0];
               oimg=box.getElementsByTagName("img");
               window.οnresize=window.οnscrοll=function(){
                    rung();
               }
               function rung(){
                     var  scrltop=document.documentElement.scrollTop||document.body.scrollTop;
                           winH=document.documentElement.clientHeight;
                      for (var i = 0; i < oimg.length; i++) {
                           var imgH=(oimg[i].offsetHeight)/3;
                               imgTop=scrltop+oimg[i].getBoundingClientRect().top;
                               if(imgTop>=scrltop&&winH+scrltop>=imgTop){
                                        Stratmove(oimg[i],{"opacity":100})
                               }
                      };
               }
       rung();

}
    </script>
</head>
<body>
      <div class="box">
           <ul>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
              <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
               <li><img src="1.jpg" alt=""></li>
           </ul>
      </div>
</body>
</html>

原理就是根据浏览器窗口还有scrollTop来和图片本身的位置进行判断，显示，这里用的是淡入淡出效果，还可以弄其他的效果，看大家的喜好