Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vb/lazyframe
🛀🏽 Dependency-free library for lazyloading iframes
https://github.com/vb/lazyframe
es6 iframe javascript lazyloading vimeo youtube
Last synced: 3 months ago
JSON representation
🛀🏽 Dependency-free library for lazyloading iframes
- Host: GitHub
- URL: https://github.com/vb/lazyframe
- Owner: vb
- License: mit
- Created: 2016-09-19T17:44:03.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-09-15T10:30:21.000Z (about 1 year ago)
- Last Synced: 2024-04-24T15:24:00.686Z (7 months ago)
- Topics: es6, iframe, javascript, lazyloading, vimeo, youtube
- Language: JavaScript
- Homepage: https://vb.github.io/lazyframe/
- Size: 847 KB
- Stars: 364
- Watchers: 12
- Forks: 54
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lazyframe
[](https://github.com/vb/lazyframe/actions/workflows/npm-publish.yml)
[](https://badge.fury.io/js/lazyframe)
Dependency-free library for lazyloading iframes. [Demo](https://vb.github.io/lazyframe/)
## 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](#install)
2. [Import](#import)
3. [Initialize](#Initialize)
4. [Options](#options)
### Install
NPM
```bash
$ npm install lazyframe --save
```
Bower
```bash
$ bower install lazyframe
```
### Import
JavaScript ES6 imports
```js
import lazyframe from "lazyframe";
```
Include JavaScript in html
```html
```
Sass import
```sass
@import 'src/scss/lazyframe'
```
Include css in html
```html
```
### Initialize
```js
// 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
```js
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](https://css-tricks.com/the-difference-between-throttling-and-debouncing/)
### `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
```html
```
### `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](https://opensource.org/licenses/MIT). © 2016 Viktor Bergehall