需求:一个页面中图片很多时,只加载即将浏览的图片,而不是每次都加载全部的图片
参考文档:1.懒加载的原理
2.懒加载的实现
实现原理:
在img标签中自定义一个属性data-src来存放真实的图片地址,将src置为空,此时图片不会加载,用jquery代码控制当每个图片元素显示在浏览器窗口时,将data-src的值赋给src,此时开始加载图片
下面是可执行的代码
html中
<img class="pic" src="" data-src="https://imagepath.jpg" alt="Image Not Found"/>
jquery代码
function isVisible($node) {
var winH = $(window).height(), //浏览器窗口高度
scrollTop = $(document).scrollTop(), //滚轮滚动高度
offSetTop = $node.offset().top; //元素距离浏览器顶部的距离
if (offSetTop < winH + scrollTop) {
let src_value = $node.attr("data-src");
$node.attr("src", src_value);
return true;
} else {
return false;
}
}
function loadPartImg() {
$(".pic").each(function () {
if ($(this).attr("src") != "") {
return;
} else {
isVisible($(this));
}
});
}
loadPartImg();
$(window).on("scroll", function () {
loadPartImg();
});