图片的懒加载

最新推荐文章于 2022-09-03 23:53:32 发布

转载最新推荐文章于 2022-09-03 23:53:32 发布 · 218 阅读

javascript 专栏收录该内容

34 篇文章

订阅专栏

懒加载作用：

1.提升用户体验，避免出现卡顿现象。

2.有选择的请求图片，减少服务器的压力和流量，减少浏览器的负担。

懒加载的实现过程：

将图片的src属性设置为“，图片的真实路径设置到data-src属性中。页面滚动的时候计算图片的位置与滚动的位置，当图片出现在浏览器视口内时，将图片的src属性设置为data-src属性的值。实现懒加载。

html结构代码：

 <ul id="picUl">
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img class="imgLazyLoad"  src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>

          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          <li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
          
        </ul>

css样式代码：

 ul{
        width: 1000px;
        height: 800px;
        overflow: scroll;
        border: 1px solid #000;
        padding: 0;
      }
      ul li {
        list-style: none;
        float: left;
      }
      .imgLazyLoad{
        width: 300px;
        height: 300px;
        /*float: left;*/
        margin: 10px 10px;
      }

js代码：

 <script type="text/javascript">

      var picList=nodeToArray("imgLazyLoad");
      var parentElement=document.getElementById('picUl');

      function nodeToArray(element) {                //将类数组转化为数组
        var nodes=document.getElementsByClassName(element);
        return Array.prototype.slice.call(nodes);       
      }

      function jugeTop(child,parent) {             //判断图片是否在可视区
        return child.offsetTop-parent.scrollTop<parent.offsetHeight;
      }

      function showPic(elementList,parent) {              //懒加载图片
        for (var i = 0; i < elementList.length; i++) {
          if(jugeTop(elementList[i],parent)){
            elementList[i].src=elementList[i].getAttribute('data-src');            
            elementList.splice(i,1);
            i--;
          }
        }
      }

      showPic(picList,parentElement);  //初始化首页的图片

      function throttle(){

        var curTime=new Date();
        return function(){

            var timeout;
            clearTimeout(timeout);

            if (new Date()-curTime>1000) {             

              curTime=new Date();
              showPic(picList,parentElement);
            }else{
               timeout=setTimeout(function() {
                showPic(picList,parentElement);
            }, 500);
            }                      
        }                
      }

      parentElement.addEventListener('scroll', throttle());

    </script>

节流函数：防止高频率的触发，保证了在一定时间间隔内一定会被触发一次。

参考：点击打开链接