Lazy Load iFrame contenido incrustado con JavaScript-lazyframe. js

Vista prévia

Descripción

lazyframe. js es una biblioteca nativa de JavaScript que se utiliza para retrasar la de carga del contenido de iframe para Google Maps, vídeos de YouTube/Vimeo/vine y así sucesivamente.

Instalación

# NPM
npm install lazyframe

# Bower
bower install lazyframe

Funcionamiento

Importa el lazyframe. CSS y el lazyframe. js en la página HTML.

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

Incrustar Google Maps, vídeos de YouTube/Vimeo siguiendo el marcado como este:

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

Inicialice el lazyframe. js y listo.

lazyframe('.lazyframe');

// or

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

Todas las opciones de configuración. Tenga en cuenta que todas las opciones mostradas a continuación también pueden ser passer a través de los atributos ' datos ' como se ve en los pasos anteriores.

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

});

Funciones de devolución de llamada.

lazyframe('.lazyframe',{


onLoad: (l) => {},

onAppend: (l) => {}

});

Registro de cambios

v1.1.7 (05/28/2018)

• Agregue soporte para youtube-nocookie.com