<!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>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 400px;
height: 400px;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul>
<li><img src="./image/0.gif" data-url="./image/1.jpg"></li>
<li><img src="./image/0.gif" data-url="./image/2.jpg"></li>
<li><img src="./image/0.gif" data-url="./image/3.jpg"></li>
<li><img src="./image/0.gif" data-url="./image/4.jpg"></li>
<li><img src="./image/0.gif" data-url="./image/5.jpg"></li>
<li><img src="./image/0.gif" data-url="./image/6.jpg"></li>
<li><img src="./image/0.gif" data-url="./image/7.jpg"></li>
</ul>
</body>
<script>
// 让盒子位于屏幕的最下面
document.querySelector('ul').style.marginTop = window.innerHeight + 'px'
//获取所有的img标签
const images = document.querySelectorAll('img');
// // 方法一
// // 懒加载事件
// function scrl(e){
// // 循环所有的标签
// let c=true;
// images.forEach(image=>{
// // 获取img标签与屏幕顶部的距离
// let imageTop = image.getBoundingClientRect().top;
// // 如果该距离小于屏幕高度,说明盒子已经出现在了屏幕的可视范围
// if(imageTop < window.innerHeight){
// // 获取data-url的地址,也就是真实的图片地址
// let url = image.getAttribute('data-url')
// // 将真实地址赋给src,从而让dom渲染真实的图片地址
// image.src = url
// }
// })
// }
// // 监听窗口滚动事件scroll,如果窗口滚动了,就触发节流函数,
// // 节流函数里面又有两个参数,第一个参数为需要节流的函数,第二个参数为节流时间
// window.addEventListener('scroll',jieliu(scrl,2000))
// // 节流函数,里面是形参,具体参数为上面事件监听传进去的参数
// function jieliu(fn,delay){
// // 1.设置一个参数为真
// let flag = true;
// return function(){
// // 如果参数为真就执行定时器
// if(flag){
// setTimeout(() => {
// // 执行节流函数并执行this
// fn.call(this);
// // 3.将参数flag改为true,即在执行完毕这一次的定时器,才能开启下一次的定时器
// // 也就是在规定的时间内只能执行一次节流函数
// flag = true;
// },delay)
// }
// // 2.定时器执行完毕,将falg改为false,当再次执行该函数时,
// // 就不再执行定时器里面的节流函数,就执行一次定时器
// flag = false
// }
// }
// 方法二
// 3.观察事件
const callback = e => {
// 这里的e就是第二步observer.observe()所传进来的图片元素
// 因为有多个图片元素传进来,所以需要遍历,然后每个对象又都有个isIntersecting属性,
// 默认为false,也就是未被观察到时为false,当元素被观察到时为true,
// 所以当它为true时我们就可以对src赋值真正的url地址
e.forEach(is => {
if(is.isIntersecting){
// 获取这个图片元素的标签
const image = is.target
const url = image.getAttribute('data-url')
// 将真实地址赋给src
image.src = url
// 赋值成功后,解除观察
observer.unobserve(image)
console.log('观察');
}
})
}
// 1.callback是一个回调函数,即观察到了元素触发的事件或者未观察到触发的事件
const observer = new IntersectionObserver( callback )
// 2.遍历图片,使每个图片都被观察
images.forEach(image=>{
observer.observe(image)
})
</script>
</html>
08.js图片懒加载
最新推荐文章于 2024-08-28 14:58:40 发布