Author: | futape |
---|---|
Views Total: | 1,680 views |
Official Page: | Go to website |
Last Update: | September 5, 2018 |
License: | MIT |
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