Free Library For LazyLoading Iframes With JavaScript | Lazyframe

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:


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:



  data-title="Something completely different">

Initialize the lazyframe.js and complete.


// or

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

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.


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


  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.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (,, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…