直接代码走你,先在页面上准备多张测试图片:
<img src=""
data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg">
<img src=""
data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg">
<img src=""
data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120">
<img src=""
data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg">
<img src=""
data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg">
<img src=""
data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg">
<img src=""
data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg">
给图片一些样式:
* {
margin: 0;
padding: 0
}
img {
display: block;
width: 500px;
height: 400px;
}
然后写JS代码实现懒加载:
/**
* offset*: 获取当前元素的偏移量(margin-*),还有一种情况是元素本身没有偏移,但是它前面有很多元素,也会导致这个偏移量增加的
* 也可以理解为:元素的某个方向距离页面某个方向的数值
* offsetParent: 元素当前定位的元素(参照物,定位父级,相对于哪个父级容器进行对位的,如果没有position的话,该值为body)
*
* client*: 获取元素的可视宽高,不包括边框,边距或滚动条
*
* scroll*: 获取元素的整个某个值,比如整个宽、高度,这是包括了滚动条的内容
* top: 滚动条到页面顶部的距离
*
* @type {HTMLElement | null}
*/
const aImg = document.querySelectorAll('img'); // 获取所有图片元素
const seeHeight = document.documentElement.clientHeight; // 获取页面的可视高度
let n = 0,
yulTop = 0, // 记录用户预览的最大高度
len = aImg.length;//n 存储加载的图片,避免每次都从第一张图片开始遍历
// 当页面第一次加载和每次滚动条滚动时触发图片加载事件
window.onscroll = window.onload = () => {
scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 记录滚动条距离页面顶部的高度
yulTop = seeHeight + scrollTop;
if (aImg[n].offsetTop < yulTop && n < len) {
setTimeout(lazyLoad(), 500);
}
};
function lazyLoad() {
for (let i = n; i < len; i++) {
if (aImg[i].offsetTop < yulTop) {
if (aImg[i].getAttribute('src') === '') {
aImg[i].src = aImg[i].getAttribute('data-img');
}
n = i + 1;
continue;
}
break;
}
}
看不懂,看不懂
哇,你跟王老师不是都懂前端代码的吗
我记得图片延迟加载有一个插件来着,用着也很方便的
自己用js原生实现一遍知道怎么可以实现,然后再去用插件,我觉得会更好