JavaScript 图片懒加载
本帖最后由 一度 于 2024-3-30 16:19 编辑监听scroll监听scroll这个事件。鼠标滚动就触发
我们需要知道两个高度
[*]窗口显示区的高度 window.innerHeight
[*]图片到视窗上边的距离高度 getBoundingClientRect().top
图片未能看见：图片距离视窗顶部的距离 > 窗口显示区的高度图片能看见：图片距离视窗顶部的距离 < 窗口显示区的高度一开始，可以将图片设置为 <img data-src=""> 其中 data- 为自定义属性，浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的之后，添加滚动监听事件，为img 赋值 src 属性
const images = document.querySelectorAll('img')
window.addEventListener('scroll', e => {
images.forEach(img => {
// 获取图片到视窗上边的距离高度
const imgTop = img.getBoundingClientRect().top
// 图片到视窗上边的距离高度 < 窗口显示区的高度 ,这时候，才需要加载
if (imgTop < window.innerHeight) {
// 获取自定义属性
const data_src = img.getAttribute('data-src')
// 将自定义属性赋值给原本的 src 属性
img.setAttribute('src', data_src)
}
})
})缺点：会多次触发属性的赋值
IntersectionObserver 观察属性IntersectionObserver 浏览器提供的构造函数，前提是浏览器能够支持交叉观察：目标元素和可视窗口会产生交叉区域，交叉区域发生了什么事情，我们需要执行什么程序// 拿着望远镜的人 callback: 需要触发条件，然后执行 触发两次：1 目标元素看得见 2 目标元素看不见
const observer = new IntersectionObserver(callback)
// 具体观察那个节点
observer.observe(Dom)
// 取消观察
observer.unobserve(Dom)isIntersecting 是否交叉，即是否进行到可视区域const images = document.querySelectorAll('img')
// 回调函数接受一个 数组参数
const callback = entries => {
entries.forEach(entry => {
// 是否交叉，即是否进行到可视区域
if (entry.isIntersecting) {
// 获取图片节点
const imgae = entry.target
// 获取自定义属性
const data_src = imgae.getAttribute('data-src')
// 修改 src
imgae.setAttribute('src', data_src)
// 修改完属性之后，取消观察
observer.unobserve(imgae)
}
})
}
// 拿着望远镜的人 callback: 需要触发条件，然后执行 触发两次：1 目标元素看得见 2 目标元素看不见
const observer = new IntersectionObserver(callback)
images.forEach(imgae => {
// 具体观察那个节点
observer.observe(imgae)
})
isIntersecting 是否交叉，即是否进行到可视区域const images = document.querySelectorAll('img')
// 回调函数接受一个 数组参数
const callback = entries => {
entries.forEach(entry => {
// 是否交叉，即是否进行到可视区域
if (entry.isIntersecting) {
// 获取图片节点
const imgae = entry.target
// 获取自定义属性
const data_src = imgae.getAttribute('data-src')
// 修改 src
imgae.setAttribute('src', data_src)
// 修改完属性之后，取消观察
observer.unobserve(imgae)
}
})
}
// 拿着望远镜的人 callback: 需要触发条件，然后执行 触发两次：1 目标元素看得见 2 目标元素看不见
const observer = new IntersectionObserver(callback)
images.forEach(imgae => {
// 具体观察那个节点
observer.observe(imgae)
})
HTML代码<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
<p>哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦</p>
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_29_48.jpg" alt="图片">
<img data-src="http://sh.qemao.com/tools/tol/tu/_filew/2020-12-07-22_28_27.jpg" alt="图片">
<script src="js/index.js"></script>
</body>
</html>
页:
[1]