implementing lazyload using html comments

Question

I am trying to implement lazy load by starting with html code that is commented out and then removing the comment when the element comes into view. (the element is a video tag and has a background image that is not commented out so there is not a blank space while the video loads -- this is also needed since the video only plays once it is in a particular area).

So far I see no performance hits with this. The video is only loaded once it is in view and everything looks good. Is there a reason anyone can think of that this might not be a good tactic?

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

note the video is only commented out initialy. After it comes into view it stays uncommented in the html

Answer 1

What you do is quite common actually. I was using similar approach for a while for Youtube videos and it worked well for me. It speeded up my page load cause loading iframe really sucked. However, I changed the implementation later.

Lets say you have hundred items and you want to load them lazily. In my case I was putting them in li. I am creating hundred li's when the page first time loaded and when you start to scroll down I put each item to its li. That might be better approach than commenting the DOM.