Lazy Loading Video To Speed Up Your Web Page

When you have a web page containing a video that will not be played until clicked, you can speedup page loading by applying this quick tip which you may have seen on Facebook.  Will wrap the video embed code with HTML comment and place it inside an anchor element that uses a video screenshot as the background image, and when that anchor is clicked will remove the wrapping HTML markup to load the video.

jQuery Approach

After taking a screenshot of that video, place it as background of the anchor element. Will use “video-in-link” as the class name to be used as the jQuery selector. With inline CSS will set the anchor as a block element and give it the same dimensions of the flash video player. For graceful degradation, the anchor will link to that video page for browsers with javascript disabled. Wrap the video embed code with HTML comment and place it inside the anchor.

<a href="http://www.youtube.com/watch?v=UmN5JJkXPiE" class="video-in-link"
  style="background:url(video1.jpg); width:425px; height:344px; display:block">
  <!--
 
  -->
</a>

Next, will include jQuery javascript file from Google CDN. On document ready Will use "One" method to attach a click event handler -one time only- on anchors with the class name “video-in-link”.. In click handler will simply remove comment markup from the inner HTML of the anchor and remove its “href” attribute..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  $("a.video-in-link").one('click',function(){
     var anchor = $(this);
     anchor.html(anchor.html().replace('<!--','').replace('-->',''));
     anchor.removeAttr('href');
     return false;
  })
})
//]]>
</script>

Non-jQuery Approach

For Javascript-only version will use the onClick attribute to call a javascript function and pass the clicked anchor using “this” keyword.

Read more: aext.net

Posted via email from .NET Info