无法延迟加载视频

Question

所以我找到了一段延迟加载图片的代码。而且效果很好。

这是代码：

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages = document.querySelectorAll("img.lazy");    
  var lazyloadThrottleTimeout;

  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);
  });

问题是我还需要延迟加载视频，所以我将 img 更改为 source，

 var lazyloadImages = document.querySelectorAll("img.lazy"); 

到

var lazyloadVideos = document.querySelectorAll("source.lazy");

我认为它会起作用，但它不起作用，我不知道为什么，有人可以帮助我或指出正确的方向。

这是我更改的完整代码：

 document.addEventListener("DOMContentLoaded", function() {
 var lazyloadVideos = document.querySelectorAll("source.lazy");    
 var lazyloadThrottleTimeout;

 function lazyload () {
  if(lazyloadThrottleTimeout) {
    clearTimeout(lazyloadThrottleTimeout);
 }    

 lazyloadThrottleTimeout = setTimeout(function() {
    var scrollTop = window.pageYOffset;
    lazyloadVideos.forEach(function(source) {
        if(source.offsetTop < (window.innerHeight + scrollTop)) {
          source.src = source.dataset.src;
          source.classList.remove('lazy');
        }
    });
    if(lazyloadVideos.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);
});

这些是 HTML 行：

<video loop class="image" onmouseover="this.play()" onmouseout="this.pause()">
   <source data-src="allvideos/1.mp4" type="video/mp4" class="lazy">
</video>