2.图片懒加载原理(原生js实现)

一、场景:

先只加载可视窗口区域的图片,当用户向下拖动滚动条时再继续加载后面的图片(也是只加载目前可视窗口区域内的图片)。

1、这样减少了加载时的线程数量,使可视区域内的图片也能够快速加载,优化了用户体验。

2、减少了同一时间发向服务器的请求数,服务器压力剧减

二、思想:
    在写网页<img>标签是并不会将图片的路径放入src属性,而是自定义一个其他的属性src将路径放入这个自定义属性中,那么在加载页面时,这个图片已开始是无法加载的。而当浏览器的可视区移动到此图片上时,将src的路径赋值给src属性,并开始加载。
三、代码实现:
<style>
    img{
        width: 200px;
        height: 200px;
    }
</style>
<body>
    <!-- 原理: -->
    <!-- 滚动条高度+可视区域的高度>图片到文档顶部的距离 -->
    <ul>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
        <li><img _src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" alt=""></li>
    </ul>

 

  
</body>
<script>
      var imgs  = document.getElementsByTagName('img')   // 获取所有的imgs标签
      var clientH = document.documentElement.clientHeight  // 可视区域的高度(是固定的)

 

    //   封装一个函数,获取该元素到文档的距离
      function getPos(obj){
          var o = {
              left:0,
              top:0
          }
          while(obj){
              o.left+=obj.offsetLeft
              o.top +=obj.offsetTop
              obj = obj.offsetParent
          }
          return o
      }
    //   滚动时调用的函数
      function auto(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop    // 滚动条的高度(处理了兼容)
        for(var i = 0;i<imgs.length;i++){
            var img = imgs[i]
            var t= getPos(img).top
            if(scrollTop+clientH>t+400){
                img.src = img.getAttribute('_src')
            }
        }      
      }
      auto()  
      window.onscroll=auto
</script>
 

 

posted @ 2021-02-04 10:28  sunshineG  阅读(75)  评论(0编辑  收藏  举报