js实现多张图片延迟加载效果

2019-11-19 16:03:26

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现多张图片延迟加载效果的具体代码，供大家参考，具体内容如下

具体代码如下:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <!--做移动端响应式必须加的样式-->  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">  <title>Document</title>  <style>    *{      margin:0;      padding:0;      font-size:14px;    }    ul,li{      list-style:none;    }    img{      display:block;      border:none;    }    /*      最外层容器不设定宽高的    */    .news{      padding:10px;    }    .news li{      height:60px;      padding:10px 0;      border-bottom:1px solid #dedede;      position:relative;    }    .news li > div:nth-child(1){      position:absolute;      top:10px;      left:0;      width:75px;      height:60px;      background:url('img/default.png') no-repeat center center;      background-size:100% 100%;/*设置背景图片大小*/    }    .news li > div:nth-child(1) img{      width:100%;      height:100%;      display:none;      opacity:0;    }    .news li > div:nth-child(2){      height:60px;      margin-left:80px;    }    .news li > div:nth-child(2) h2{      height:20px;      line-height:20px;      /*实现文字超出隐藏*/      overflow:hidden;      text-overflow:ellipsis;      white-space: nowrap;    }    .news li > div:nth-child(2) p{      line-height:20px;      font-size:12px;      color:#ccc;    }  </style></head><body>  <ul id='news' class='news'>    <li>      <div>        <img src="" alt="">      </div>      <div>        <h2>我是一个标题</h2>        <p>我是内容</p>      </div>    </li>  </ul>  <script>    var news = document.getElementById('news')    var imgList = news.getElementsByTagName('img')    //1、获取需要绑定的数据（Ajax）    var jsonData = null;    ~function(){      var xhr = new XMLHttpRequest();      //URL地址后面加的随机数是在清除每一次请求数据时候（GET请求）产生的缓存      xhr.open('GET','data.json?_='+Math.random(),false)      xhr.onreadystatechange = function(){        if(xhr.readystate ===4 && /^2/d{2}$/.test(xhr.status)){          var val = xhr.responseText;          jsonData = utils.formatJSON(val)        }      }      xhr.send(null)    }()    //2、数据绑定->把jsonData存储的数据绑定到页面中（字符串拼接）    ~function(){      var str = '';      if(jsonData){        for(var i = 0,len = jsonData.length;i<len;i++){          var curData = jsonData[i]          str+='<li>';          str+='<div><img src="" trueImg="'+curData['img']+'"></div>';          str+='<div>';          str+='<h2>'+curData['title']+'</h2>';          str+='<p>'+curData['desc']+'</p>';          str+='</div>';          str+='</li>';        }      }      news.innerHTML = str;    }()    //3、图片延迟加载    //我先编写一个方法实现单张图片的延迟加载    function lazyImg(curImg){      var oImg = new Image;      oImg.src = curImg.getAttribute('trueImg');      oImg.onload = function(){        curImg.src = this.src;        curImg.style.display = "block";        fadeIn(curImg)        oImg = null      };      curImg.isLoad = true;    }    function fadeIn(curImg){      var duration = 500,interval = 10,target = 1;      var step = (target/duration)*interval;      var timer = window.setInterval(function(){        var curOP = utils.getCss(curImg,'opacity');        if(curOP>1){          curImg.style.opacity = 1;          window.clearInterval(timer)          return        }        curOP+=step;        curImg.style.opacity = curOP;      },interval)    }    function handleAllImage(){      for(var i = 0,len = imgList.length;i<len;i++){        var curImg = imgList[i];        //当前的图片处理过了就不需要在重新的进行处理了        if(curImg.isLoad = true){          continue;        }        //只有A小于B的时候才进行处理,当前图片是隐藏的，我们其实计算的是它父节点的A        var curImgPar = curImg.parentNode;        var A = utils.offset(curImgPar).top + curImgPar.offsetHeight;        var B = utils.win('clientHeight')+utils.win('scrollTop');        if(A<B){          lazyImg(curImg);        }      }    }    //4、开始的时候一秒加载第一屏的图片，当滚动条滚动的时候，再加载剩余的图片    window.setTimeout(handleAllImage,1000);    window.onscroll = handleAllImage;  </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：node.js中grunt和gulp的区别详解

下一篇：js指定步长实现单方向匀速运动