Delay Loading Of Iframe Embedded Content Until Clicking – lazyembed.js

Preview:

Description:

lazyembed.js is a lazy loading library for iframe embedded content such as Youtube/Vimeo videos, Google Maps, etc.

The library delays the loading of these iframe content until clicked, with custom placeholder support.

How to use it:

Include the necessary stylesheet ‘lazyembed.css’ and JavaScript ‘lazyembed.js’ on the page.

<link rel="stylesheet" href="dist/lazyembed.css">
<script src="dist/lazyembed.js"></script>

Set the content to be loaded in the iframe element using the ‘data-src’ attribute and specify the placeholder in the ‘data-placeholder’ attribute:

<iframe
  width="560"
  height="420"
  frameborder="0"
  data-lazyembed
  data-src="https://www.youtube.com/embed/XTYVQRdLfH0"
  data-placeholder="https://img.youtube.com/vi/XTYVQRdLfH0/0.jpg"
  allowfullscreen
></iframe>

Initialize the lazyembed and done.

new LazyEmbed();

Default configuration options.

new LazyEmbed({
  elements: '[data-lazyembed]',
  overlayText: 'Click to load',
  adoptResponsiveEmbed: true,
  excludeElements: 'a',
  classes: {
    root: 'lazyembed',
    overlay: 'lazyembed__overlay',
    text: 'lazyembed__text',
     placeholder: 'lazyembed__placeholder',
    embed: 'lazyembed__embed'
  },
});

Callback functions available.

new LazyEmbed({
  onClick: function onClick() {},
  onLoad: function onLoad() {},
  onInit: function onInit() {}
});

Changelog:

v1.1.7 (09/05/2018)

• BUGFIX: Fire ‘onlLoad’ callback only once