Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js

Category: Javascript , Loading , Recommended | May 28, 2018
Author: viktorbergehall
Views Total: 4,093
Official Page: Go to website
Last Update: May 28, 2018
License: MIT

Preview:

Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js

Description:

lazyframe.js is a native JavaScript library used to delay the loading of iframe content for Google Maps, Youtube/Vimeo/Vine videos and so on.

Installation:

# NPM
npm install lazyframe

# Bower
bower install lazyframe

How to use it:

Import the lazyframe.css and lazyframe.js into the html page.

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

Embed Google Maps, Youtube/Vimeo videos following the markup like this:

<div 
  class="lazyframe"
  data-src="https://www.youtube.com/embed/6hgVihWjK2c"
  data-vendor="youtube">
</div>

<div 
  class="lazyframe"
  data-src="https://vimeo.com/45915667"
  data-vendor="vimeo">
</div>

<div 
  class="lazyframe"
  data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
  data-title="Something completely different">
</div>

Initialize the lazyframe.js and done.

lazyframe('.lazyframe');

// or

let elements = document.querySelectorAll('.lazyframe');
lazyframe(elements);

All configuration options. Note that all the options displayed below can also be passer via ‘data’ attributes as you seen in the previous steps.

lazyframe('.lazyframe',{

  // youtube, vimeo and vine
  vendor: undefined,

  // id
  id: undefined,

  // source
  src: undefined,

  // custom thumbnail
  thumbnail: undefined,

  // custo title
  title: undefined,

  // api key for youtube
  apikey: undefined,

  // Value (in milliseconds) for when the update function should run after the user has scrolled
  debounce: 250,

  // 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).
  lazyload: true,

  // // execute when the element is in view
  initinview: false

});

Callback functions.

lazyframe('.lazyframe',{

  onLoad: (l) => {},
  onAppend: (l) => {}

});

Changelog:

v1.1.7 (05/28/2018)

  • Add support for youtube-nocookie.com

You Might Be Interested In:


2 thoughts on “Lazy Load iFrame Embedded Content With JavaScript – lazyframe.js

Leave a Reply