- 通過監(jiān)聽滾動(dòng)事件召川，判斷圖片相對于視口的位置是否小于瀏覽器視口的高度痴奏。
const images = document.querySelectorAll('img')
window.addEventListener('scroll',e=>{
images.forEach(image =>{
const imageTop = image.getBoundingClientRect().top
if(imageTop < window.innerHeight){
// 獲取自定義屬性的圖片地址 然后給圖片賦值
const data_src = image.getAttribute('data-src')
image.setAttribute('src',data_src)
}
})
})
缺點(diǎn)是執(zhí)行的次數(shù)很多蛀骇，而且圖片已經(jīng)加載過了還是會(huì)判斷
- 通過IntersectionObserver(https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver)
const images = document.querySelectorAll('img')
const callback = entries => {
entries.forEach(entry => {
console.log(entry)
if (entry.isIntersecting) {
const image = entry.target
const data_src = image.getAttribute('data-src')
image.setAttribute('src', data_src)
console.log('觸發(fā)了事件')
observe.unobserve(image)
}
})
}
const observe = new IntersectionObserver(callback)
images.forEach(image => {
observe.observe(image)
})
優(yōu)點(diǎn)是觀察過一次后可以解綁厌秒，執(zhí)行次數(shù)大大減少。缺點(diǎn)是ie不兼容
