作者:mobiledu2502881467 | 来源:互联网 | 2020-09-06 22:31
本文为大家详细介绍了js中图片懒加载的实现原理以及图片懒加载的优势,具有一定的参考价值,希望可以帮助到大家。优势:1、增强用户体验;2、优化代码;3、减少HTTP的请求。
html部分
js部分
window.Onload= () => {
// 获取某节点与浏览器顶部的距离
function getTop(e) {
if (!e) return
return e.offsetTop
}
let imgs = document.getElementsByTagName('img')
function lazyLoading(imgs) {
// 可是区域高度
let innerHeight = window.innerHeight;
// 滚动区域高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for (let i = 0; i getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src')
}
}
}
lazyLoading(imgs)
window.Onscroll= () => {
lazyLoading(imgs)
}
}
以上就是详解js中图片懒加载的实现原理的详细内容,更多请关注 第一PHP社区 其它相关文章!