Question

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

到目前为止，我看到没有性能点击。视频只有在视野中才会加载，一切看起来都不错。是否有人能够想到这可能不是一个好策略？

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

注意视频最初只是注释掉了。在它进入视图后，它在html中保持未注释

Answer 1

你做的事实上很常见。我在Youtube视频中使用了similar approach一段时间，对我来说效果很好。它加快了我的页面加载，导致加载iframe真的很糟糕。但是，我稍后改变了实施。

让我们说你有100件物品，你想懒洋洋地加载它们。就我而言，我把它们放在li中。当页面第一次加载时我创建了100个li，当你开始向下滚动时我把每个项目都放到它的li上。这可能比评论DOM更好。

使用html评论

1 个答案: