Lazy Load iFrame Embedded Content With JavaScript

Category: Loading | April 4, 2019
Lazy Load iFrame Content
Author: Clay Larson
Official Page: Go to Website
Last Update:April 4, 2019
License:MIT

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>

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.