滚动后无法加载我的惰性加载,我的代码有什么问题?

时间:2018-11-04 23:51:13

标签: javascript html lazy-loading

我在Google上关注了此内容。 https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

延迟加载不会加载。单击类别后,将不会显示图像。

这是我正在使用的javascript。

    document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});

链接到网站。 http://highdemanddesigns.com/calhoun/portfolio

0 个答案:

没有答案