javascript 加载图片-纯Javascript延迟加载图片方法

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

页面上的图片太多。 为了有更好的体验，浏览器不会仍然加载，而是兜圈子，经常使用延迟加载。

HTML代码

  
    
    
      img {
        width: 500px;
        height: 350px;
        display: block;
        margin: 10px auto;
      }
    
  
  
    
    
    
    
    
    
    
    
    
    
    
  

JavaScript 代码：

      document.addEventListener("DOMContentLoaded", function() {
        let lazyloadImages = document.querySelectorAll("img.lazy-load");
        let lazyloadThrottleTimeout;
        function lazyload() {
          if(lazyloadThrottleTimeout) {
            clearTimeout(lazyloadThrottleTimeout);
          }
          lazyloadThrottleTimeout = setTimeout(function() {
            let 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);
      });

注意：给图片添加class="lazy-load"即可延迟加载javascript 加载图片javascript 加载图片，src没有形参。