图片懒加载小当心得

时间 2019-11-20

标签图片加载当心繁體版

原文原文链接

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

为何要懒加载（延迟）：对于图片过多的页面，为了加速页面加载速度，因此不少时候咱们须要将页面未出如今可视区域内的图片先不作加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提高，也提升了用户的体验。前端

实现的原理：实现的原理其实很简单，在页面载入的时候将页面上的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中实现的代码：this

$(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);
            }
        })


    })
})

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