CSS 图片的懒加载

Question

我有以下针对<img>的lazy load函数：

<script>
        document.addEventListener("DOMContentLoaded", function() {
          var lazyloadImages;    

          if ("IntersectionObserver" in window) {
            lazyloadImages = document.querySelectorAll(".lazy");
            var imageObserver = new IntersectionObserver(function(entries, observer) {
              entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                  var image = entry.target;
                  image.src = image.dataset.src;
                  image.classList.remove("lazy");
                  imageObserver.unobserve(image);
                }
              });
            });

            lazyloadImages.forEach(function(image) {
              imageObserver.observe(image);
            });
          } else {  
            var lazyloadThrottleTimeout;
            lazyloadImages = document.querySelectorAll(".lazy");
            
            function lazyload () {
              if(lazyloadThrottleTimeout) {
                clearTimeout(lazyloadThrottleTimeout);
              }    

              lazyloadThrottleTimeout = setTimeout(function() {
                var scrollTop = window.pageYOffset;
                lazyloadImages.forEach(function(img) {
                    if(img.offsetTop < (window.innerHeight + scrollTop)) {
                      img.src = img.dataset.src;
                      img.classList.remove('lazy');
                    }
                });
                if(lazyloadImages.length == 0) { 
                  document.removeEventListener("scroll", lazyload);
                  window.removeEventListener("resize", lazyload);
                  window.removeEventListener("orientationChange", lazyload);
                }
              }, 20);
            }

            document.addEventListener("scroll", lazyload);
            window.addEventListener("resize", lazyload);
            window.addEventListener("orientationChange", lazyload);
          }
        })
    </script>

这个函数不是我的，我需要知道如何修改它以使其适用于下一个示例，该示例从CSS加载图像：

<div class="col-md-2 col-sm-3 col-xs-4 photo" style="padding: 2.5px">
    <span onclick="window.location.href=\''.$link.'\';" 
        class="thumbnail" 
        role="img" 
        style="background-image: url(\''.$image.'\'); cursor: pointer; margin: 0; margin-top: 5px;" 
        aria-label="' . $row["topic_title"] . '"
        title="'.$row['topic_title'].'">
    </span>
    
    <center>
        <p class="name" style="margin 0 2px; color: white; margin-top: 5px;">
            <a href="'.$link.'" title="'.$row['topic_title'].'">' . $title . '</a>
        </p>
    </center>
</div>

在一个包含24个gif的页面上，页面加载相对较慢，我想改变这种情况。 我可以使用<img>正常加载图片，但是我希望页面更加动态，因为使用span我有不同的主题。 下面是我成功编写的脚本，希望对大家有所帮助。

if (entry.isIntersecting) {
    var image = entry.target;
    image.src = image.dataset.src;      
    var imageUrl = "url" + "(" + "'" + image.src + "')";
    entry.target.style.backgroundImage = imageUrl;
    image.classList.remove("lazy");
    imageObserver.unobserve(image);
}

- Andrei Gradinaru

---

附注：对于<img />，您不需要任何脚本 - 只需使用loading="lazy"-所有主要浏览器在1-2年前都已添加了对其的支持，请参见此处：https://dev59.com/-mAg5IYBdhLWcg3wDHXS#60405256 - Dai

Answer 1

在一个有24个gif的页面上，页面加载相对较慢，我想改变这种情况。

总的来说，网站上的图片对性能影响很大。这很可能是导致网站变慢的原因。如果你的网站需要这么多GIF图像，我首先会考虑压缩技术。搜索GIF到WebP转换器和文件压缩器（例如ImageAlpha，ImageOptim，Handbrake等）。

祝你好运！

- mascotinleotard