Lazyframe
Dependency-free library for lazyloading iframes. Demo
Why?
Because embedded content takes time to load.- Youtube – 11 requests ≈ 580kb
- Google maps – 52 requests ≈ 580kb
- Vimeo – 8 requests ≈ 145kb
Lazyframe creates a responsive placeholder for embedded content and requests it when the user interacts with it. This decreases the page load and idle time.
Lazyframe comes with brand-like themes for Youtube and Vimeo.
Install
NPM$ npm install lazyframe --save
Bower
$ bower install lazyframe
Import
JavaScript ES6 importsimport lazyframe from "lazyframe";
Include JavaScript in html
<script src="dist/lazyframe.min.js"></script>
Sass import
@import 'src/scss/lazyframe'
Include css in html
<link rel="stylesheet" href="dist/lazyframe.css" />
Initialize
// Passing a selector
lazyframe(".lazyframe");
// Passing a nodelist
let elements = document.querySelectorAll(".lazyframe");
lazyframe(elements);
// Passing a jQuery object
let elements = $(".lazyframe");
lazyframe(elements);
Options
You can pass general options to lazyframe on initialization. Element-specific options (most options) are set on data attributes on the element itself.General options and corresponding defaults
lazyframe(elements, {
debounce: 250,
lazyload: true,
autoplay: true,
// Callbacks
onLoad: (lazyframe) => console.log(lazyframe),
onAppend: (iframe) => console.log(iframe),
onThumbnailLoad: (img) => console.log(img),
});
debounce
Value (in milliseconds) for when the update function should run after the user has scrolled. More herelazyload
Set this to false
if you want all API calls and local images to be loaded on page load (instead of when the element is in view).autoplay
Set this to false
to remove autoplay from the allow
attribute on the iframe tag i.e if set this to false
if you want don't want your Youtube video to automatically start playing once the user clicks on the play icon.onLoad
Callback function for when a element is initialized.onAppend
Callback function for when the iframe is appended to DOM.onThumbnailLoad
Callback function with the thumbnail URLElement-specific options
<div
class="lazyframe"
data-vendor=""
data-title=""
data-thumbnail=""
data-src=""
data-ratio="1:1"
data-initinview="false"
data-autoplay="false"
></div>
data-vendor
Attribute for theming lazyframe. Currently supported values are youtube
, youtube_nocookie
and vimeo
.