尽管找不到任何解决方法,但我环顾四周。我正在设计一个图像组合网站,出于性能原因,希望在进入视口时加载图像。最初处于视图中的图像可以很好地加载,尽管在滚动时没有图像加载
<script>
registerListener('load', lazyLoad);
registerListener('scroll', lazyLoad);
function isInViewport(elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <=(window.innerWidth || document.documentElement.clientWidth)
);
};
var image = [];
lazy = document.getElementsByClassName('lazy');
console.log("there are " + lazy.length + " lazy images")
function lazyLoad() {
for (i = 0; i < lazy.length; i++) {
console.log('attempting to load' + (i+1));
if (isInViewport(lazy[i])) {
console.log("loaded: image " + (i+1));
lazy[i].src = lazy[i].getAttribute('data-src');
}
}
}
function registerListener(event, func) {
window.addEventListener(event, func);
}
</script>
非常感谢任何帮助(我对Stackoverflow的第一个问题,所以请让我知道我做错了什么
答案 0 :(得分:2)
您不应该再使用scroll事件来延迟加载图像了,如今,有一些性能更好的选项可用。
最新的方法(目前仅在最新的chrome浏览器中有效)是使用<img src="pic.jpg" loading="lazy">
。如果您将加载属性添加到img(甚至是iframe),它将在用户可见后立即加载。不需要JS。
延迟加载图像的第二个最佳方法是使用intersection observer,您可以定义浏览器应监视的对象,并定义与另一个对象(或整个窗口)的交集,然后在出现此情况时对其进行反应相交发生。
首先,您必须定义观察者:
var options = {
threshold: 2.0
}
var observer = new IntersectionObserver(callback, options);
root默认为浏览器视口,这是我们延迟加载图像所需要的。
然后为观察者定义目标:
var target = document.querySelector('.lazy-load');
observer.observe(target);
最后,定义目标可见后应如何处理:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
});
};
所有示例代码均来自mozillas开发人员文档,有关更多详细信息和更多示例,请参见页面。