2
JS | IntersectionObserver 使用滚动 动画渐显 元素
source link: http://surest.cn/archives/222/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
参考效果地址
https://surest-sky.github.io/web/intersection.html
window.addEventListener('load', () => {
let options = {
rootMargin: "0px",
threshold: 0.3,
};
const infiniteCallback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
console.log(entry)
// stop observer and load the image
const lazyImage = entry.target;
console.log("lazy loading ", lazyImage);
lazyImage.setAttribute("src", "https://i.picsum.photos/id/1023/400/400.jpg?hmac=maIZbUj7YZWazRxkpv3aiALni4kh_xYP1Vzkf28IvhA")
const isC = lazyImage.getAttribute("data-class")
lazyImage.classList.add(isC)
// observer.unobserve(entry.target);
setTimeout(() => {
lazyImage.classList.remove(isC)
}, 1000)
}
});
}
loaderObserver = new IntersectionObserver(
infiniteCallback,
options
);
console.log(document.querySelectorAll("img"))
const images = document.querySelectorAll("img");
Array.from(images).map(image => {
loaderObserver.observe(image);
})
})
https://github.com/surest-sky/surest-sky.github.io/blob/master/web/intersection.html
本文由 邓尘锋 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Jan 30, 2023 at 03:08 pm
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK