图片预加载
当我们如果要加载一张比较大的图片，他要从上到下一点一点加载，这样展示效果不好，为了解决这个问题，我们可以
先new一个image对象，并设置这个对象的 src 属性，来提前加载图片。（因为浏览器会检测到 src 属性的改变，并且开始向服务器发送请求来获取图片数据。）
let img = new Image();
img.onload = function() {
document.getElementById("myImage").src = img.src;
};
img.src = 'path/to/your/image.jpg'; // 先加载图片
图片懒加载
原理：通常使用IntersectionObserver，通过监听目标元素和视口之间的交集，来判断该元素是否进入视口或者离开视口。当被观察的元素与根元素的交集发生变化时，回调函数会被触发。
- observer.observe(DOM节点)可以进行观察DOM节点。
- observer.unobserve(DOM节点)可以取消观察
但是观察一次就行了，不需要一直观察，所以图片渲染完成之后就可以取消观察了
<!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>
<body>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<!-- 浏览器在碰到data-*这个属性是不会像默认属性那样进行属性处理的，所以我们在这里把src改为data-src之后 他就会变得不知道从哪里下载图片了 -->
<img data-src="../image/Snipaste_2025-02-27_19-22-25.png" alt="" srcset="">
<img data-src="../image/1.png" alt="">
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<p>lllllllllll</p>
<img data-src="../image/微信图片_20230904235201.jpg" alt="" srcset="">
<script>
const images=document.querySelectorAll('img[data-src]')
const callback=entries=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
const image=entry.target
//获取自定义属性
const data_src=image.getAttribute('data-src')
// 将自定义属性赋值给src属性
image.setAttribute('src',data_src)
// 观察过之后就取消观察
observer.unobserve(image)
console.log('触发');
}
})
}
const observer=new IntersectionObserver(callback)//一个用于观察的实例
// 在每次循环时使用observer实例的observe方法来观察每个img节点
images.forEach(image=>{
observer.observe(image)
})
</script>
</body>
</html>
