当前位置：Gxlcms > JavaScript > js实现多张图片延迟加载效果

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

时间：2021-07-01 10:21:17 帮助过：5人阅读

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

具体代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <!--做移动端响应式必须加的样式-->
  6.   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  7.   <title>Document</title>
  8.   <style>
  9.     *{
  10.       margin:0;
  11.       padding:0;
  12.       font-size:14px;
  13.     }
  14.     ul,li{
  15.       list-style:none;
  16.     }
  17.     img{
  18.       display:block;
  19.       border:none;
  20.     }
  21.     /*
  22.       最外层容器不设定宽高的
  23.     */
  24.     .news{
  25.       padding:10px;
  26.     }
  27.     .news li{
  28.       height:60px;
  29.       padding:10px 0;
  30.       border-bottom:1px solid #dedede;
  31.       position:relative;
  32.     }
  33.     .news li > div:nth-child(1){
  34.       position:absolute;
  35.       top:10px;
  36.       left:0;
  37.       width:75px;
  38.       height:60px;
  39.       background:url('img/default.png') no-repeat center center;
  40.       background-size:100% 100%;/*设置背景图片大小*/
  41.     }
  42.     .news li > div:nth-child(1) img{
  43.       width:100%;
  44.       height:100%;
  45.       display:none;
  46.       opacity:0;
  47.     }
  48.     .news li > div:nth-child(2){
  49.       height:60px;
  50.       margin-left:80px;
  51.     }
  52.     .news li > div:nth-child(2) h2{
  53.       height:20px;
  54.       line-height:20px;
  55.       /*实现文字超出隐藏*/
  56.       overflow:hidden;
  57.       text-overflow:ellipsis;
  58.       white-space: nowrap;
  59.     }
  60.     .news li > div:nth-child(2) p{
  61.       line-height:20px;
  62.       font-size:12px;
  63.       color:#ccc;
  64.     }
  65.   </style>
  66. </head>
  67. <body>
  68.   <ul id='news' class='news'>
  69.     <li>
  70.       <div>
  71.         <img src="" alt="">
  72.       </div>
  73.       <div>
  74.         <h2>我是一个标题</h2>
  75.         <p>我是内容</p>
  76.       </div>
  77.     </li>
  78.   </ul>
  79.   <script>
  80.     var news = document.getElementById('news')
  81.     var imgList = news.getElementsByTagName('img')
  82.     //1、获取需要绑定的数据（Ajax）
  83.     var jsonData = null;
  84.     ~function(){
  85.       var xhr = new XMLHttpRequest();
  86.       //URL地址后面加的随机数是在清除每一次请求数据时候（GET请求）产生的缓存
  87.       xhr.open('GET','data.json?_='+Math.random(),false)
  88.       xhr.onreadystatechange = function(){
  89.         if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){
  90.           var val = xhr.responseText;
  91.           jsonData = utils.formatJSON(val)
  92.         }
  93.       }
  94.       xhr.send(null)
  95.     }()
  96.     //2、数据绑定->把jsonData存储的数据绑定到页面中（字符串拼接）
  97.     ~function(){
  98.       var str = '';
  99.       if(jsonData){
  100.         for(var i = 0,len = jsonData.length;i<len;i++){
  101.           var curData = jsonData[i]
  102.           str+='<li>';
  103.           str+='<div><img src="" trueImg="'+curData['img']+'"></div>';
  104.           str+='<div>';
  105.           str+='<h2>'+curData['title']+'</h2>';
  106.           str+='<p>'+curData['desc']+'</p>';
  107.           str+='</div>';
  108.           str+='</li>';
  109.         }
  110.       }
  111.       news.innerHTML = str;
  112.     }()
  113.     //3、图片延迟加载
  114.     //我先编写一个方法实现单张图片的延迟加载
  115.     function lazyImg(curImg){
  116.       var oImg = new Image;
  117.       oImg.src = curImg.getAttribute('trueImg');
  118.       oImg.onload = function(){
  119.         curImg.src = this.src;
  120.         curImg.style.display = "block";
  121.         fadeIn(curImg)
  122.         oImg = null
  123.       };
  124.       curImg.isLoad = true;
  125.     }
  126.     function fadeIn(curImg){
  127.       var duration = 500,interval = 10,target = 1;
  128.       var step = (target/duration)*interval;
  129.       var timer = window.setInterval(function(){
  130.         var curOP = utils.getCss(curImg,'opacity');
  131.         if(curOP>1){
  132.           curImg.style.opacity = 1;
  133.           window.clearInterval(timer)
  134.           return
  135.         }
  136.         curOP+=step;
  137.         curImg.style.opacity = curOP;
  138.       },interval)
  139.     }
  140.     function handleAllImage(){
  141.       for(var i = 0,len = imgList.length;i<len;i++){
  142.         var curImg = imgList[i];
  143.         //当前的图片处理过了就不需要在重新的进行处理了
  144.         if(curImg.isLoad = true){
  145.           continue;
  146.         }
  147.         //只有A小于B的时候才进行处理,当前图片是隐藏的，我们其实计算的是它父节点的A
  148.         var curImgPar = curImg.parentNode;
  149.         var A = utils.offset(curImgPar).top + curImgPar.offsetHeight;
  150.         var B = utils.win('clientHeight')+utils.win('scrollTop');
  151.         if(A<B){
  152.           lazyImg(curImg);
  153.         }
  154.       }
  155.     }
  156.     //4、开始的时候一秒加载第一屏的图片，当滚动条滚动的时候，再加载剩余的图片
  157.     window.setTimeout(handleAllImage,1000);
  158.     window.onscroll = handleAllImage;
  159.   </script>
  160. </body>
  161. </html>

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！