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.

1. Install
2. Import
3. Initialize
4. Options

$3

NPM

``bash
$ npm install lazyframe --save
`

Bower

`bash
$ bower install lazyframe
`

$3

JavaScript ES6 imports

`js
import lazyframe from "lazyframe";
`

Include JavaScript in html

`html

`

Sass import

`sass
@import 'src/scss/lazyframe'
`

Include css in html

`html

`

$3

`js
// 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

`js
lazyframe(elements, {
debounce: 250,
lazyload: true,
autoplay: true,

// Callbacks
onLoad: (lazyframe) => console.log(lazyframe),
onAppend: (iframe) => console.log(iframe),
onThumbnailLoad: (img) => console.log(img),
});
`

$3

Value (in milliseconds) for when the update function should run after the user has scrolled. More here

$3

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).

$3

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.

$3

Callback function for when a element is initialized.

$3

Callback function for when the iframe is appended to DOM.

$3

Callback function with the thumbnail URL

Element-specific options

`html
class="lazyframe"
data-vendor=""
data-title=""
data-thumbnail=""
data-src=""
data-ratio="1:1"
data-initinview="false"
data-autoplay="false"
>