时间戳

首页 > 解决方案 > JavaScript 事件滚动不会触发

javascript - JavaScript 事件滚动不会触发

问题描述

尽管我找不到任何可以解决问题的方法，但我环顾四周。我正在设计一个图像组合网站，并且出于性能原因希望在图像进入视口时加载它们。最初在视图中的图像加载正常，尽管在滚动时没有加载图像

<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 上的第一个问题，所以如果我做错了请告诉我）

标签： javascripthtml

解决方案

您不应该再使用滚动事件来延迟加载图像，现在有更好的性能选项可用。最新的方法（目前仅适用于最新的 chrome 浏览器）是使用<img src="pic.jpg" loading="lazy">如果您将加载属性添加到 img（甚至是 iframe），它将在用户可见时加载。不需要 JS。

延迟加载图像的第二个最佳方法是使用交集观察器 使用此方法，您可以定义浏览器应观察的对象并定义与另一个对象（或整个窗口）的交集，然后在该交集发生时做出反应。

首先你必须定义你的观察者：

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 开发人员文档，有关更多详细信息甚至更多示例，请参见该页面。

推荐阅读