图片懒加载小小心得

Posted 2020-07-04

前段时间看了京东大牛分享的前端技术，其中就有一个图片懒加载的内容。然后自己试了试，感觉挺好的。

为什么要懒加载（延迟）：对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户的体验。

实现的原理：实现的原理其实很简单，在页面载入的时候将页面上的img标签的src指向一个小图片，把真实地址存放在一个自定义属性中，这里我使用data-src来存放，如下：<img src="loading.gif"data-src="http://xxx.ooo.com"/>

然后将页面img标签获取并保存，开启一个定时器，遍历保存的img标签，判断其位置是否出现在了可视区域，如果出现在可视区域了那么就把真实的src地址给赋值上。并且从数组中删除，避免重复判断。如何判断是否出现在可视区域内呢？你可以获取当前img的相对于文档顶的偏移距离减去scrollTop的距离，然后和浏览器窗口的高度进行比较，如果小于浏览器窗口则出现在了可视区域内了，反之，则没有。

在html中

<img src="image/loading.gif" data-src="http://image6.huangye88.com/2013/03/28/2a569ac6dbab1216.jpg">

在js中实现的代码：

$(function(){
    $(window).scroll(function() {
        array = $("img");
        $("img").each(function () {
            if ( ( $(this).offset().top - $(document).scrollTop()) < $(window).height() ){
                $(this).attr(‘src‘,$(this).attr(‘data-src‘));
                array.splice($(this),1);
            }
        })


    })
})

这样就好了 推荐适用于移动端页面的使用