无法延迟加载视频

大佬教程收集整理的这篇文章主要介绍了无法延迟加载视频，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决无法延迟加载视频？

开发过程中遇到无法延迟加载视频的问题如何解决？下面主要结合日常开发的经验，给出你关于无法延迟加载视频的解决方法建议，希望对你解决无法延迟加载视频有所启发或帮助；

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

这是代码：

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

大佬总结

以上是大佬教程为你收集整理的无法延迟加载视频全部内容，希望文章能够帮你解决无法延迟加载视频所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。