lazyframe.js is a native JavaScript library used to delay loading iframe content for Google Maps, Youtube / Vimeo / Vine videos, etc.

lazy loading javascript on scroll, lazy loading example, iframe lazy loading css, loading lazy browser support, iframe lazy load not working, loadinglazy background image

How to make use of it:

Installation:

# NPM
npm install lazyframe

# Bower
bower install lazyframe

Import the lazyframe.css and lazyframe.js into the HTML web 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 complete.

lazyframe('.lazyframe');

// or

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

All configuration choices. Note that every one of the choices displayed under may also be passer through ‘data’ attributes as you see within the earlier 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 capabilities.

lazyframe('.lazyframe',{

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

});

Lazy Load iFrame Embedded Content, Lazyframe Plugin/Github

See Demo And Download

Official Website(vb): Click Here

This superior jQuery/javascript plugin is developed by vb. For extra Advanced Usages, please go to the official website.