<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
width: 150px;
height: 150px;
margin: 40px;
}
</style>
</head>
<body>
<img a-src="./image/1.jpg" alt="">
<img a-src="./image/2.jpg" alt="">
<img a-src="./image/3.jpg" alt="">
<img a-src="./image/4.jpg" alt="">
<img a-src="./image/5.jpg" alt="">
<img a-src="./image/6.jpg" alt="">
<img a-src="./image/7.jpg" alt="">
<img a-src="./image/1.jpg" alt="">
<img a-src="./image/1.jpg" alt="">
<script>
// 获取全部的img标签
var imgs = document.querySelectorAll('img')
function show() {
// 获取可视区域的高度
var bomHeight = innerHeight
// console.log(bomHeight)
// 获取滚动条滚动高度
// document.body.scrollTop: 兼容ie浏览器
// document.documentElement.scrollTop: 获取浏览器滚动条的滚动高度
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop
// imgs[0].src = './image/1.jpg'
// console.log(imgs)
// 获取最后一张图片距离浏览器顶部的高度
// console.log(imgs[8].offsetTop)
for (var i = 0; i < imgs.length; i++) {
// 浏览器滚动高度 + 可视区域高度 >= imgs[i].offsetTop(每张图片距离顶部的高度)
if (scrollHeight + bomHeight >= imgs[i].offsetTop) {
// getAttribute: 获取元素的属性值
// console.log(imgs[i].getAttribute('a-src'))
// 如果满足条件,说明图片需要被加载
imgs[i].src = imgs[i].getAttribute('a-src')
}
}
}
// window.onload: 页面加载完成后立即执行
window.onload = function () {
show()
}
window.onscroll = function () {
show()
}
// 连续赋值
// window.onload = window.onscroll = function () {
// show()
// }
</script>
</body>
</html>
JS:图片懒加载
最新推荐文章于 2024-08-28 14:58:40 发布