Lazy Load iFrame Embedded Content With JavaScript

By using the jQuery and a small function of Javascript, You can easily build Lazy Load iFrame content. This lazy code work with Underscore which is a small Javascript library that provides a whole mess of useful functionality.

It helps developers to extend any built-in objects. With the help of jQuery and Underscore, We can easily implement lazying loading on any code within the iFrame.

You can implement Lazy Load on Youtube Video, Vimeo or daily motion videos. Its also work with any custom content within the Iframe.

The function also works well with Google Maps and support a wide range of browsers. I did test it on the latest version of Firefox, Chrom and Internet explore and its work without having any issue.

How to Create a Lazy Load for iFrame Content?

You can check out the demo how it works and downloads the source code to start implementation on your website. To add the effect, you need to add jQuery and underscore.js file into the document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

After adding both files, You need to add HTML code. There are a few ways to implement. The first one is to add iFrame code within a div with class name iframe.

<div class="iframe"><span>&#60;iframe&#62;&#60;/iframe&#62;</span></div>

Moreover, The Javascript automatically detect the iframe code on your website and will apply the effect on it. But you need to define the path of video or content in the data-src attribute.

<iframe allowfullscreen="" frameborder="0" height="280" data-src="https://www.youtube.com/embed/66hEJ3Xd4Ac?showinfo=0" width="470"></iframe>

The Javascript Function

Now the Javascript needs to make work the effect on HTML.

<script type="text/javascript">
// LAZY LOAD FUNCTION
function lazyLoad() {
  $('iframe').each(function() {
	var frame = $(this),
		vidSource = $(frame).attr('data-src'),
		distance = $(frame).offset().top - $(window).scrollTop(),
		distTopBot = window.innerHeight - distance,
		distBotTop = distance + $(frame).height();

	if (distTopBot >= 0 && distBotTop >= 0) { // if frame is partly in view
	  $(frame).attr('src', vidSource);
	  $(frame).removeAttr('data-src');
	}
  });
}
var throttled = _.throttle(lazyLoad, 100);
$(window).scroll(throttled);
</script>

If you want to implement lazy effect on a separate element, You can use ID to identify it. In our case, We have to define the #example ID.

<script type="text/javascript">
// ILLUSTRATION OF VARIABLES
// as calculated on div#example
function lazyLoadExample() {
  var frame = $('#example'),
	  vidSource = $(frame).attr('data-src'),
	  distance = $(frame).offset().top - $(window).scrollTop(),
	  distTopBot = Math.round(window.innerHeight - distance), // distance from top of frame to bottom of viewport
	  distBotTop = Math.round(distance + $(frame).height()); // distance from bottom of frame to top of viewport

  document.getElementById('stick1').innerHTML = "distBotTop: " + distBotTop;
  document.getElementById('stick2').innerHTML = "distTopBot: " + distTopBot;
}
var throttled = _.throttle(lazyLoadExample, 100);
$(window).scroll(throttled);
</script>