npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

lazyframe

v2.2.7

Published

Dependency-free library for lazyloading iframes

Downloads

8,091

Readme

Lazyframe

Node.js Package 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 and Vimeo.

  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" 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 (most options) are set on data attributes on the element itself.

General options and corresponding defaults

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

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

debounce

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

lazyload

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

autoplay

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.

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"
  data-autoplay="false"
></div>

data-vendor

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

data-title

Attribute for custom title. Leave empty to get value from noembed.com.

data-thumbnail

Attribute for custom thumbnail. Leave empty to get value from noembed.com.

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