告诉你什么是图片懒加载！

分手后的思念是犯贱 2022-11-03 04:22 160阅读 0赞

# 什么是图片懒加载？ #

> 当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1\*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

> 通俗一点：  
> 1、就是创建一个自定义属性data-src存放**真正需要显示的图片路径**，而img自带的src放一张大小为**1 \* 1px的图片路径**。  
> 2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的**值赋**给src。  
> *ps：自定义属性可以取任何名字*

![html.png][]

# 需要了解的问题 #

> 1、如何加载图片？  
> 2、如何判断一个元素出现在视野中？

*  如何加载图片  
    只需要把data-src中的地址放到src的里面就好了

function loadImg($img){
    //.attr(值)
    //.attr(属性名称,值)
    $img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
    $img.attr('data-isLoaded', 1) //已加载过的图片做标记
    }

结果如下：

![地址更换.png][.png]

地址更换.png

*  如何判断一个元素出现在视野中？  
    元素相对顶点的距离(文字) <= 窗口高度 + 滚动的距离

代码：

function isShow($node){
    return $node.offset().top <= $(window).height() + $(window).scrollTop()
    }

如图：

![判断一个元素出现在视野中.png][.png 1]

判断一个元素出现在视野中.png

![原理.png][.png 2]

原理：

start()
    $(window).on('scroll', function(){
     start()
    })
    
    function start(){
      //.not('[data-isLoaded]')选中已加载的图片不需要重新加载
     $('.container img').not('[data-isLoaded]').each(function(){
       var $node = $(this)
       if( isShow($node) ){
         loadImg($node)
       }
     })
     }
    
    //判断一个元素是不是出现在窗口(视野)
    function isShow($node){
     return $node.offset().top <= $(window).height() + $(window).scrollTop()
     }
    //加载图片
     function loadImg($img){
    //.attr(值)
    //.attr(属性名称,值)
    $img.attr('src', $img.attr('data-src')) //把data-src的值 赋值给src
    $img.attr('data-isLoaded', 1)//已加载的图片做标记
    }
    
    </script>

**注:**记得引用jQuery，元素浮动，必须清除

[html.png]: /images/20221024/30222f0e78744eaa9e4096a3a8a17c7d.png
[.png]: /images/20221024/3a1f5f6065d5430bac3881d7de949807.png
[.png 1]: /images/20221024/a006cb4f2326454f9b478b84cb62e77c.png
[.png 2]: /images/20221024/2228f1b049b34b44b3ae745196089415.png