图片懒加载 #68
Comments
const images = document.querySelectorAll("image");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
images.forEach((image) => {
observer.observe(image);
}); |
|
补充：react可以直接用组件 |
const images = document.querySelectorAll("img")
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
// 判断当前元素是否可见
if (entry.isIntersecting) {
// 创建一个自定义属性data-src存放真正要显示的图片路径，原本img自带的src放一张默认图片
const img = entry.target
const data_src = img.getAttribute('data-src')
img.setAttribute('src', data_src)
// 解除观察，有几张图片就触发几次
observer.unobserve(img)
}
})
})
images.forEach(image => {
// 对每一个图片对象进行观察
observer.observe(image)
}) |
两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
img {
width: 200px;
height: 200px;
margin: 160px 60px;
display: block;
}
</style>
<body>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<img data-src="./img/1.jpg" src="">
<img data-src="./img/2.jpg" src="">
<img data-src="./img/3.jpg" src="">
<img data-src="./img/6.jpg" src="">
<img data-src="./img/5.jpg" src="">
</body>
<script src="./函数防抖.js"></script>
<script>
let img = document.querySelectorAll('img')
// function s() {
// img.forEach((e) => {
// let top = e.getBoundingClientRect().top
// if (top < window.innerHeight) {
// let src = e.getAttribute('data-src')
// e.setAttribute('src', src)
// }
// })
// }
// let lazy = devounce2(s, 500)
// window.onscroll = lazy
function callback() {
const cb = (entries) => {
entries.forEach((a) => {
if (a.isIntersecting) {
//进入视口
/*
- boundingClientRect: 被观察元素的矩形区域信息。
- intersectionRatio: 被观察元素的可见部分与整个元素的比例。
- intersectionRect: 可见部分的矩形区域信息。
- isIntersecting: 布尔值，表示元素是否与根元素相交。
- rootBounds: 根元素的矩形区域信息。
- target: 被观察的目标元素。
- time: 触发回调的时间戳。
*/
const imge = a.target
let src = imge.getAttribute('data-src')
imge.setAttribute('src', src)
observer.unobserve(imge)
}
})
}
const observer = new IntersectionObserver(cb, {
root: null, //具体容器，如果null则默认整个窗口
rootMargin: '20px',
threshold: 0//交叉比例
});
img.forEach((e) => {
observer.observe(e)
})
}
callback()
</script>
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: