一、原理
- 在浏览器滚动的时候，遍历所有图片，若图片在视窗可视区域，则加载该图片
- 将图片地址存放在自定义属性中(data-src)，需要加载图片再从中取出来
- 判断图片可见：
- 图片上部分进入可视窗体
windowHeight + scrollTop > offsetTop
- 图片下部分进入可视窗体
offsetTop + nodeHeight > scrollTop
二、如何实现
- 需要用到4个高度
let windowHeight = $(window).height(),//视窗高度
scrollTop = $(window).scrollTop(),//滚动条滚动距离
offsetTop = $node //图片相对于文档的垂直坐标
.offset()
.top,
nodeHeight = $node.height(); //图片高度
- 判断图片可见
if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop) {
return true;
} else {
return false;
}
- 方法：是否显示该图片
const isShow = ($node) => {
let windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node
.offset()
.top,
nodeHeight = $node.height();
if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop) {
return true;
} else {
return false;
}
}
- 方法：遍历所有图片，加载没有load类名且isShow返回true的图片（加载前给图片加类名load)
const loadImgs = ()=>{
console.log('1');
$('.wrapper img').not('.load').each(function(index){
console.log('2');
let $node = $(this);
if(isShow($node)){
$node.addClass('load');
$node.attr('src',$node.attr('data-src'));
}
});
}
- 最后，监听屏幕滚动事件，并在一开始进入界面时加载图片
loadImgs();
$(window).scroll(function () {
loadImgs();
})
