Carga progresivamente imágenes & iframes usando JavaScript simple-ProgressiveMedia

Vista prévia

Descripción

El ProgressiveMedia es un plugin de JavaScript vainilla que se utiliza para cargar imágenes e iframes progresivamente a medida que se desplazan a la vista.

Adecuado para contenido-aplicaciones web fuertemente tales como carteras, galerías, aplicaciones de intercambio de fotos, etc.

También proporciona un efecto de desenfoque de espiga media para las imágenes antes de la carga diferida. También se admite cualquier contenido de iframe: Google Maps, vídeos de YouTube, página de Facebook like, publicaciones de Instagram, etc.

See also:

• 10 mejores bibliotecas de JavaScript de carga diferida

Funcionamiento

Instale & Descargue el ProgressiveMedia con NPM:

# NPM
$ npm install progressive-media --save

Importe los archivos JavaScript y CSS necesarios en el documento.

<link href="/path/to/progressive-media.min.css" rel="stylesheet">
<script async src="/path/to/progressive-media.min.js"></script>

Incrustar imágenes & contenido de iframe en el documento de la siguiente manera:

<div class="progressive-media progressive-media-image progressive-media-loaded"

 style="max-width: 392px; max-height: 260px;" data-img-src="images/01.jpeg">

<div class="progressive-media-aspect" style="padding-bottom: 66.32653061%;">



<div class="progressive-media-aspect-inner">





<img class="progressive-media-image-placeholder progressive-media-content progressive-media-blur"







 style="opacity: 1; visibility: visible" src="images/01-placeholder.jpeg">





<img class="progressive-media-image-placeholder progressive-media-image-placeholder-edge progressive-media-content"







 style="opacity: 1; visibility: visible" src="images/01-placeholder.jpeg">





<noscript>







<img src="images/01.jpeg"









 class="progressive-media-image-original progressive-media-content">





</noscript>



</div>

</div>
</div>

<div class="progressive-media progressive-media-iframe progressive-media-unloaded" style="max-width: 500px; max-height: 408px;" data-src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/instagram/&tabs=timeline&width=500&height=408&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId">

<div class="progressive-media-aspect" style="padding-bottom: 81.6%;">



<div class="progressive-media-aspect-inner">





<noscript>







<iframe src="https://www.facebook.com/plugins/page.php?href=https://www.facebook.com/instagram/&tabs=timeline&width=500&height=408&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" class="progressive-media-content"></iframe>





</noscript>



</div>

</div>
</div>

Inicialice la biblioteca ProgressiveMedia y done.

progressiveMedia.loadProgressiveMedia();

var progressiveMediaOptions = {



// viewport offset to trigger the loading event


viewportOffset: (window.innerHeight / 2),



// how often to trigger the loading event when scrolling


throttleTime: 50,



// defines the time from the last scroll event to trigger the loading event


debounceTime: 100



};

Registro de cambios

02/27/2019

• Caja de borde de barrido de altura fija con margen en el elemento de medios progresivos