data-*作用
data-_ 属性用于存储私有页面后应用的自定义数据。
data-_ 属性可以在所有的 HTML 元素中嵌入数据
自定义属性前缀 “data-“ 会被客户端忽略
所以用 data-src 设置为 img 的 src 初始值，浏览到图片时，将其赋给图片的 src
方法一、事件监听
通过对 window 监听 scroll 事件判断是否加载
需要知道窗口显示区 a window.innerHeight
图片到距离页面顶部的距离 b getBoundingClientRect().top,a >b 时加载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const imgs= document.getElementsByClassName('img')
window.addEventListener('scroll',e=>{
imgs.forEach(
img=>{
const imgTop=img.getBoundingClientRect().top
if(imgTop<window.innerHeight){
const data_src=img.getAttribute('data-src')
img.setAttribute('src',data_src)
}
}
)
})
|
方法二、IntersectionObserver
需要浏览器支持
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| const imgs= document.getElementsByClassName('img')
const loadImg=()=>{
entries.forEach(entry=>{
cosnt img=entry.target
const data_src=img.getAtrribute('data_src')
img.setAtrribute('src',data-src)
observer.unobserve(img)
})
}
const observer=new IntersectionObserver(loadImg)
// 目标元素能看到触发一次，目标消失一次
imgs.forEach(img=>{
observer.observe(img)
})
|
