jQuery Plugin To Load iFrame Content Asynchronously - EasyFrame

EasyFrame is a jQuery based iFrame enhancement plugin which loads iframe content (Youtube Videos, URLs, Widgets, etc) asynchronously on window load to improve page performance.

How to use it:

1. Include references to jQuery library and the jQuery EasyFrame plugin before the closing body tag.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="dist/jquery-easyframe.min.js"></script>

2. Initialize the plugin on document ready and we're ready to go.

$('iframe').easyframe();

3. Create an iframe element and specify the address of the document to embed in this iframe using data-src attribute instead of src

<iframe src="" data-src="http://jqueryscript.net" frameborder="0"></iframe>

4. You can also specify the document's address in the JavaScript during initialization.

$('iframe').easyframe({
  url: 'http://jqueryscript.net'
});

5. Specify the timeout which is used to wait after the window loads to instantiate the iframe async loading.

$('iframe').easyframe({
  timeout: 2000
});

6. All default options and callback.

$('iframe').easyframe({
  url: null,
  attribute: 'data-src',
  timeout: 0 
},function() {
  // do something
});

Change log:

2016-03-14

• Changed callback function at all iframe loaded

---

This awesome jQuery plugin is developed by EmanueleCoppola. For more Advanced Usages, please check the demo page or visit the official website.