博客图片实现懒加载

2021年5月1日 21:38 阅读 1.77k 评论 0

博客首页的加载一直比较慢,有时候甚至5s还打不开,所以首页优化刻不容缓。

通过开发者工具看到博客的图片是和博客必要的样式文件以及js一起加载的,这无疑会影响博客的加载速度,所以我们使用图片懒加载的方式来处理。

修改图片属性

在html中,如果img元素有src属性的话,那么这个图片是100%会被加载的,但是现在我们要的效果是当网页文档加载完成后再加载这些图片,怎么做呢?

既然不要它加载,那么不要给它src属性不就完了,如下:

<img data-src="img.jpg" src="loading.gif"> 

我们将图片本来的src放到data-src中,这样浏览器加载网页时便不会加载这些图片,src属性中放置一张loading的图片占位,这样图片位置就不会空白。

通过js加载图片

在上一步中,如果我们刷新浏览器,会发现图片都已经变成了loading状态,现在我们就通过js来加载这些图片。

首先我们需要遍历每个img

$('img').each(function () { 

}) 

获取到每个img元素后,我们首先判断它有没有data-src属性,因为我们不是所有的图片都是要懒加载的,如果不判断的话就会对每个img都做操作,影响效率。

$('img').each(function () { 
    var $node = $(this); // 此时的this是每一个img元素 
    // 判断img是否有data-src元素 
    if ($(this).attr('data-src')) { 

    } 
}) 

此时进入if的即为我们准备要加载的img,我们将data-src赋给src来实现加载图片

function loadImg($img){ 
    $img.attr('src', $img.attr('data-src')); 
    $img.attr('data-isLoaded', 1); 
} 

调用这个函数即可实现加载图片

$('img').each(function () { 
    var $node = $(this); // 此时的this是每一个img元素 
    // 判断img是否有data-src元素 
    if ($(this).attr('data-src')) { 
        loadImg($node) 
    } 
}) 

function loadImg($img){ 
    $img.attr('src', $img.attr('data-src')); 
    $img.attr('data-isLoaded', 1); 
} 

再次刷新浏览器,这次我们页面所有的图片都应该加载出来了

优化图片加载逻辑

但是,这样依然达不到我们优化的目的,这样做只是滞后了图片加载,整个首页的图片依旧会全部加载,我们可不可以只加载我们屏幕内显示的图片,其他的等滑动页面再加载呢?

我们可以这样做:

$('img').each(function () { 
    var $node = $(this); // 此时的this是每一个img元素 
    // 判断img是否有data-src元素 
    if ($(this).attr('data-src') && isShow($node)) { 
        loadImg($node) 
    } 
}) 

function isShow($node) { 
    // $node.offset().top 元素距离页面内容的高度 
    // $(window).height() 窗口高度 
    // $(window).scrollTop() 元素滚动内容的总长度 
    return $node.offset().top <= $(window).height() + $(window).scrollTop() 
}, 

function loadImg($img){ 
    $img.attr('src', $img.attr('data-src')); 
} 

再次刷新浏览器,我们可以看到,屏幕内的图片已经加载了,当滑动网页时,新出现在屏幕里的图片才会加载。

但是,当我们打开控制台时又会发现新问题,没滑动一次页面,已经加载过的图片都会重新加载,虽然在页面上看不到变化,但是身为强迫症的我,却是忍不了,在每次加载图片时给图片一个data-isLoaded属性,以此来标记图片已经被加载过,避免了多次加载。

所以最终代码是:

$('img').not('[data-isLoaded]').each(function () { 
    var $node = $(this); // 此时的this是每一个img元素 
    // 判断img是否有data-src元素 
    if ($(this).attr('data-src') && isShow($node)) { 
        loadImg($node) 
    } 
}) 

function isShow($node) { 
    // $node.offset().top 元素距离页面内容的高度 
    // $(window).height() 窗口高度 
    // $(window).scrollTop() 元素滚动内容的总长度 
    return $node.offset().top <= $(window).height() + $(window).scrollTop() 
}, 

function loadImg($img){ 
    $img.attr('src', $img.attr('data-src')); 
    $img.attr('data-isLoaded', 1); // 标记图片已经加载 
} 

优化过后,我博客首页加载的速度提升了不止一星半点!

最后修改于2021年5月1日 21:38
©允许规范转载

版权声明:如无特殊说明,文章均为本站原创,转载请注明出处

本文链接:https://www.yangyingqi.com/47.html

JavaScript
微信
支付宝
登录后即可进行评论/回复