博客首页的加载一直比较慢，有时候甚至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
