原生JS,通过IntersectionObserver内置构造函数实现图片懒加载效果()
时间:2023-04-20 发布者: 访问量:56
<script>
const IMGS = document.querySelectorAll(".currentImg"); // 获取所有图片
const callback = entries => { // 设置构造函数中接收到的参数中的操作事项
entries.forEach(enntry => { // 因为entries里面放着所有被观察的节点,所有需要遍历判断
if (enntry.isIntersecting) { // 判断当前节点是否在可视区域能被看到
const image = enntry.target; // 通过事件对象拿到这个元素
const data_url = image.getAttribute("data-src"); // 获取该元素data-src中存放的路径
image.setAttribute("src", data_url); // 赋值给真实路径
Observer.unobserve(image); // 停止观察
}
})
}
const Observer = new IntersectionObserver(callback); // 生成实例
IMGS.forEach(img => Observer.observe(img)) // 通过遍历对所有Img元素都进行观察
</script>
发布于
const IMGS = document.querySelectorAll(".currentImg"); // 获取所有图片
const callback = entries => { // 设置构造函数中接收到的参数中的操作事项
entries.forEach(enntry => { // 因为entries里面放着所有被观察的节点,所有需要遍历判断
if (enntry.isIntersecting) { // 判断当前节点是否在可视区域能被看到
const image = enntry.target; // 通过事件对象拿到这个元素
const data_url = image.getAttribute("data-src"); // 获取该元素data-src中存放的路径
image.setAttribute("src", data_url); // 赋值给真实路径
Observer.unobserve(image); // 停止观察
}
})
}
const Observer = new IntersectionObserver(callback); // 生成实例
IMGS.forEach(img => Observer.observe(img)) // 通过遍历对所有Img元素都进行观察
</script>
用户评论
猜你喜欢
生活励志
生活文摘
生活福利
生活编程