javascript - 使用html注释实现lazyload

Question

我试图通过从注释掉的 html 代码开始，然后在元素进入 View 时删除注释来实现延迟加载。 (该元素是一个视频标签，并且具有未注释掉的背景图像，因此在视频加载时不会有空白区域 - 这也是必需的，因为视频仅在特定区域中播放一次)。

到目前为止，我还没有发现性能受到影响。视频只有在查看后才会加载，并且一切看起来都很好。是否有人认为这可能不是一个好策略？

HTML:

     <div class="set-feature-panel cell">
        <div id="teams" class="feature-image feature-sink-screenshot">
          <video class="feature-image no-display" poster="i/sidebar_frame.png" id="teams-video">
            <!-- <source src="i/sidebar_open.webm" type="video/webm">
            <source src="i/sidebar_open.mp4" type="video/mp4"> -->
          </video>
          <div class="image-space"></div>
        </div>
      </div>

JS:

manageGif: function() { 
    var scrollPosition = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

    for(var i=0;i<gifAnimations.gifElements.length;i++){
      var elGif = gifAnimations.gifElements[i].id;
      var el = gifAnimations.gifElements[i].elSize;
      var scrolled = gifAnimations.gifElements[i].scrolled;
      var center = window.innerHeight/4;

      // this thresh is where the image is out of view 
      var topThreshold = (el.top+ el.diff) - scrollPosition - 55;
      var bottomThreshold = ( el.bottom - el.diff - window.innerHeight )- scrollPosition;
      if ( !(topThreshold > 0 && bottomThreshold < 0) || gifAnimations.isHidden() ){
        gifAnimations.stopVideo(elGif, i);
      } 
      //this thresh is where animation should happen
      var topTrigger = el.top - scrollPosition - 55;
      var bottomTrigger = ( el.top + el.diff -window.innerHeight )- scrollPosition;
      if (topTrigger > 0 && bottomTrigger < -center && !scrolled ){ //was 0 not -100
        gifAnimations.playVideo(elGif, i);
      } 
    }
  },

playVideo: function(elGif, i){
    gifAnimations.gifElements[i].scrolled = true;
    elGif.innerHTML = elGif.innerHTML.replace('<!--','').replace('-->','');
    elGif.play();
  },

  stopVideo: function(elGif, i){
    gifAnimations.gifElements[i].scrolled = false;
    elGif.currentTime = 0;
    elGif.pause();
  },

注意该视频最初仅被注释掉。当它进入 View 后，它在 html 中保持未注释状态

Answer 1

你所做的事情实际上很常见。我正在使用 similar approach有一段时间在 Youtube 视频上，它对我来说效果很好。它加快了我的页面加载速度，因为加载 iframe 真的很糟糕。不过，我后来改变了实现。

假设您有一百个项目，并且您想延迟加载它们。就我而言，我将它们放在 li 中。当页面第一次加载时，我正在创建一百个里，当您开始向下滚动时，我将每个项目放入其里。这可能是比注释 DOM 更好的方法。