博客首页的加载一直比较慢,有时候甚至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); // 标记图片已经加载
}
优化过后,我博客首页加载的速度提升了不止一星半点!
JavaScript版权声明:如无特殊说明,文章均为本站原创,转载请注明出处
本文链接:https://www.yangyingqi.com/47.html