当不支持交叉观察者时加载所有图像
当不支持交叉观察者时加载所有图像
提问于 2022-01-15 14:43:59
我用交集观测器来延迟加载图像。如何在不支持交叉观察者的浏览器中加载所有图像？
我的script=
const imob = new IntersectionObserver((entries, self) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
llo(entry.target);
self.unobserve(entry.target);
}
});
});
document.querySelectorAll('.lzyp').forEach((pcu) => {
imob.observe(pcu);
});
const llo = (pcu) => {
const img = pcu.querySelector('img');
const sce = pcu.querySelectorAll('source');
sce.forEach((sue) => {
sue.srcset = sue.dataset.srcset;
sue.removeAttribute('data-srcset');
});
img.src = img.dataset.src;
img.removeAttribute('data-src');
}回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-15 14:53:55
- 也许是IntersectionObserver用聚脂填料
- 如果不支持IntersectionObserver，则添加回退代码。
if (!('IntersectionObserver' in window) ||
!('IntersectionObserverEntry' in window) ||
!('intersectionRatio' in window.IntersectionObserverEntry.prototype) ||
!('isIntersecting' in window.IntersectionObserverEntry.prototype)
) {
// load all images here
document.querySelectorAll('.lzyp').forEach( llo );
}IE中不支持解析箭函数：
// change from this
document.querySelectorAll('.lzyp').forEach((pcu) => {
imob.observe(pcu);
});
// to this
document.querySelectorAll('.lzyp').forEach( function(pcu) {
imob.observe(pcu);
});加在一起：
function llo(pcu) {
const img = pcu.querySelector('img');
const sce = pcu.querySelectorAll('source');
sce.forEach((sue) => {
sue.srcset = sue.dataset.srcset;
sue.removeAttribute('data-srcset');
});
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
// IntersectionObserver is not supported
if (!('IntersectionObserver' in window) ||
!('IntersectionObserverEntry' in window) ||
!('intersectionRatio' in window.IntersectionObserverEntry.prototype) ||
!('isIntersecting' in window.IntersectionObserverEntry.prototype)
) {
// load all images here
document.querySelectorAll('.lzyp').forEach( llo );
} else {
const imob = new IntersectionObserver( function(entries, self) {
entries.forEach( function(entry) {
if (entry.isIntersecting) {
llo(entry.target);
self.unobserve(entry.target);
}
});
});
document.querySelectorAll('.lzyp').forEach(function(pcu) {
imob.observe(pcu);
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70722434
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号