lazy load iframe (delay src http call) with jquery

A similar question was recently posted specific to iFrames with Twitter Bootstrap-based tabs, which I answered using a technique I'm calling Lazy Loading of iFrames. The js/jquery is as follows; see the full code including html markup in the fiddle or on my response to the OP:

<script>
$('#myTabs').bind('show', function(e) {  

// identify the tab-pane
paneID = $(e.target).attr('href');

// get the value of the custom data attribute to use as the iframe source
src = $(paneID).attr('data-src');

//if the iframe on the selected tab-pane hasn't been loaded yet...
if($(paneID+" iframe").attr("src")=="")
{
    // update the iframe src attribute using the custom data-attribute value
    $(paneID+" iframe").attr("src",src);
}
});
</script>

<iframe loading="lazy"

When implemented, this feature will allow lazy loading when the iframe enters the viewport without any JavaScript!

There is also an analogous feature for images: How do you make images load lazily only when they are in the viewport?

For iframes, I'm not sure what is the status, but it does seem like there is an intention to enable it as well:

  • caniuse says available: https://caniuse.com/#feat=loading-lazy-attr
  • https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element does not mention loading currently, while https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element does
  • MDN marks it as experimental: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

To observe this in action, open the "Network" tab of your developer tools before running the snippet below. If your browser implements the feature, you can clearly see new network requests as you scroll down to the next iframe!

Test outcomes:

  • Chromium 81: works, loads on hover
  • Firefox 77: fails, loads all at once

document.getElementById('load-now').addEventListener('click', function(){
  for (const img of document.getElementsByTagName('iframe')) {
    img.loading = 'eager';
  }
});
.separator {
    height: 1000px;
    width: 100px;
    border: 5px solid red;
}
img {
    height: 340px;
    border: 5px solid black;
}
#load-now {
  border: 5px solid black;
}
<div id="load-now">Click me to load all images now!</div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Donald_Trump"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Barack_Obama"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/George_W._Bush"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Bill_Clinton"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/George_H._W._Bush"></iframe></div>
<div class="separator"></div>
<div><iframe loading="lazy" height="340" src="https://en.wikipedia.org/wiki/Ronald_Reagan"></iframe></div>

YouTube videos

For YouTube embedded video iframe more specifically: Lazy Load youtube video from iframe API

On Chromium 81, it also works on jsfiddle: https://jsfiddle.net/cirosantilli/3p0tk5nc but didn't work here on Stack Overflow. I'm not sure why. Removing the loading="lazy" makes no difference, so I think it fails for some other reason.

Keep in mind that embedding YouTube videos on a local HTML file also fails randomly to me which makes testing harder: Embed Youtube code is not working in HTML

document.getElementById('load-now').addEventListener('click', function(){
  for (const img of document.getElementsByTagName('iframe')) {
    img.loading = 'eager';
  }
});
.separator {
    height: 1000px;
    width: 100px;
    border: 5px solid red;
}
img {
    height: 340px;
    border: 5px solid black;
}
  #load-now {
  border: 5px solid black;
  }
<div id="load-now">Click me to load all images now!</div>
<div><iframe width="560" height="315" loading="lazy"  src="https://www.youtube.com/embed/j_fl4xoGTKU" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/TQ5k2u25eI8" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/FOwYDlay8rI" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/MRhAljmHq-o" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/wAQxIla7F68" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>
<div class="separator"></div>
<div><iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/_6D05gCWh_I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></iframe></div>

This worked for me.

var iframes = $('iframe');

$('button').click(function() {
    iframes.attr('src', function() {
        return $(this).data('src');
    });
});

iframes.attr('data-src', function() {
    var src = $(this).attr('src');
    $(this).removeAttr('src');
    return src;
});

jsFiddle.

Tags:

Javascript

Http

Jquery

Iframe

Lazy Loading

Recent Posts