什么是图片懒加载？举个例子，如代码狗博客打开后，所有文章缩略图都是一张同样的待加载图片，我的首页一页10篇文章，十篇文章使用同一张图片，当访客访问我的网站时，网页首先加载了网页结构与一张缩略图，这张缩略图会被用到所有文章上，如果其它文章列表不出现在访客视野中，浏览器就不会加载真实的缩略图。这样浏览器就会认为，网页已经加载完毕，事实上图片并没有被加载。当访客滑动网页，缩略图进入浏览器可视区域，就使用JavaScript加载真实缩略图。
分享一段自用的JavaScript图片懒加载代码
图片懒加载原理
利用JavaScript读取进入浏览器可视区域的所有img图片标签，并读取date-src属性值，不一定非得这个属性，也可以是其它属性。我们在写网站后台程序的时候，生成的img标签就不要给src属性真实图片地址，而是使用默认待加载提示图片，将真实图片地址给date-src属性，如下代码形式：
复制
<img date-src="https://www.daimadog.org/logo.png" src="https://www.daimadog.org/1.png"/>
JavaScript懒加载核心代码
复制
lazyRender();
//预防滚动屏幕时重复判断执行
var clock;
$(window).on('scroll', function () {
if (clock) {
clearTimeout(clock);
}
clock = setTimeout(function ()
lazyRender();
}, 300)
});
//图片是否需要载入判断
function lazyRender() {
$('img').each(function () {
if (checkShow($(this)) && !isLoaded($(this))) {
loadImg($(this));
}
})
}
//检查图片是否在可视区域
function checkShow($img) { // 传入一个img的jq对象
var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离
var windowHeight = $(window).height(); // 浏览器自身的高度
var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置
if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
return true;
}
return false;
}
//检查是否已加载
function isLoaded($img) {
return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
}
//加载图片
function loadImg($img) {
$img.attr('src', $img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
}注意：很明显这些代码使用了jQuery语法，所以你需要在本段代码之前先载入jQuery，否则会执行错误哟！代码是没有问题的，亲测有效！
评论 （0）