Retrasar la carga del contenido incrustado de iframe hasta que haga clic en-lazyembed. js

Vista prévia

Descripción

lazyembed. js es una biblioteca de carga diferida para contenido incrustado iframe como vídeos de YouTube/Vimeo, Google Maps, etc.

La biblioteca retrasa la carga de estos contenidos iframe hasta que se hace clic, con soporte de marcador de posición personalizado.

Funcionamiento

Incluya la hoja de estilos necesaria ' lazyembed. css ' y JavaScript ' lazyembed. js ' en la página.

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

Establezca el contenido que se cargará en el elemento IFRAME utilizando el atributo ' Data-src ' y especifique el marcador de posición en el atributo ' Data-placeholder ':

<iframe

width="560"

height="420"

frameborder="0"

data-lazyembed

data-src="https://www.youtube.com/embed/XTYVQRdLfH0"

data-placeholder="https://img.youtube.com/vi/XTYVQRdLfH0/0.jpg"

allowfullscreen
></iframe>

Inicializar el lazyembed y hecho.

new LazyEmbed();

Opciones de configuración predeterminadas.

new LazyEmbed({

elements: '[data-lazyembed]',

overlayText: 'Click to load',

adoptResponsiveEmbed: true,

excludeElements: 'a',

classes: {


root: 'lazyembed',


overlay: 'lazyembed__overlay',


text: 'lazyembed__text',


 placeholder: 'lazyembed__placeholder',


embed: 'lazyembed__embed'

},
});

Funciones de devolución de llamada disponibles.

new LazyEmbed({

onClick: function onClick() {},

onLoad: function onLoad() {},

onInit: function onInit() {}
});

Registro de cambios

v1.1.7 (09/05/2018)

• BUGFIX: la devolución de llamada de ' onlLoad ' solo se activará una vez