πŸ›€πŸ½ Dependency-free library for lazyloading iframes
Switch branches/tags
Nothing to show
Clone or download
vb Merge pull request #15 from joe1chen/youtube_nocookie
Add support for youtube-nocookie.com
Latest commit bb1c268 May 28, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Add support for youtube-nocookie.com May 19, 2018
src Add support for youtube-nocookie.com May 19, 2018
.babelrc Gulp and babel configs Sep 21, 2016
.gitignore Added npm debug to gitignore Sep 24, 2016
README.md Update README.md May 3, 2018
bower.json Update bower.json May 3, 2018
gulpfile.js Removed unused tasks Feb 22, 2017
index.html Updated readme and demo Sep 26, 2016
package.json Bump version to 1.1.7 May 27, 2018

README.md

Lazyframe

npm version

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, Vimeo and Vine.

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

Install

NPM

$ npm install lazyframe --save

Bower

$ bower install lazyframe

Import

Javascript ES6 imports

import 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" type="text/css" 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 (mosts options) is set on data attributes on the element itself.

General options and corresponding defaults

lazyframe(elements, {
   apikey: undefined,
   debounce: 250,
   lazyload: true,

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

apikey

If you want to load a thumbnail and title for a Youtube video you'll have to have an apikey with the Youtube data api library enabled. Get it from here

If you don't feel like getting a key, just use your own thumbnail and title in data-thumbnail and data-title attribute

debounce

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

lazyload

Set this to true if you want all api calls and local images to be loaded on page load (instead of when the element is in view).

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 url

##Element-specific options

<div
	class="lazyframe"
	data-vendor=""
	data-title=""
	data-thumbnail=""
	data-src=""
  	data-ratio="1:1"
	data-initinview="false">
</div>

data-vendor

Attribute for theming lazyframe. Currently supported values are youtube, vimeo and vine.

data-title

Attribute for custom title. Leave empty to get value from api.

data-thumbnail

Attribute for custom thumbnail. Leave empty to get value from api.

data-src

The source of what you want to lazyload.

data-ratio

The ratio of the lazyframe. Possible values: 16:9, 4:3, 1:1

data-initinview

Set this to true if you want the resource to execute (for example video to play) when the element is in view.

License

MIT. Β© 2016 Viktor Bergehall