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) })
|