lozad.js
1.0.0
Cargador perezoso altamente performre, ligero y configurable en JS puro sin dependencias para imágenes, iframes y más, utilizando la API IntersectionObserver
Y muchos más ...
Las bibliotecas de carga perezosa existentes conectan el evento de desplazamiento o usan un temporizador periódico y llame getBoundingClientRect() en elementos que deben ser cargados. Este enfoque, sin embargo, es dolorosamente lento ya que cada llamada para getBoundingClientRect() obliga al navegador a volver a recubrir toda la página e introducirá un Jank considerable en su sitio web.
Hacer que esto sea más eficiente y performador es para qué está diseñada IntersectionObserver, y se aterriza en Chrome 51. IntersectionObservers le permite saber cuándo ingresa o sale de la vista del navegador.
# You can install lozad with npm
$ npm install --save lozad
# Alternatively you can use Yarn
$ yarn add lozad
# Another option is to use Bower
$ bower install lozadLuego, con un Bundler de módulo como Rollup o Webpack, use como lo haría con cualquier otra cosa:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require ( 'lozad' ) O cargue a través de CDN e incluya en la etiqueta head de su página.
< script type =" text/javascript " src =" https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js " > </ script > Al cargar desde CDN, puede encontrar la biblioteca en window.lozad .
En HTML, agregue un identificador al elemento (el selector predeterminado identificado es la clase lozad ):
< img class =" lozad " data-src =" image.png " >Todo lo que necesitas hacer ahora es solo instanciar Lozad de la siguiente manera:
const observer = lozad ( ) ; // lazy loads elements with default selector as '.lozad'
observer . observe ( ) ; o con una referencia Element DOM:
const el = document . querySelector ( 'img' ) ;
const observer = lozad ( el ) ; // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer . observe ( ) ;o con opciones personalizadas:
const observer = lozad ( '.lozad' , {
rootMargin : '10px 0px' , // syntax similar to that of CSS Margin
threshold : 0.1 , // ratio of element convergence
enableAutoReload : true // it will reload the new image when validating attributes changes
} ) ;
observer . observe ( ) ;Referencia:
o si desea dar una definición de función personalizada para cargar elemento:
lozad ( '.lozad' , {
load : function ( el ) {
console . log ( 'loading element' ) ;
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
} ) ; Si desea extender el estado loaded de elementos, puede agregar la opción cargada:
Nota : Lozad utiliza el atributo
"data-loaded"="true"para determinar si un elemento se ha cargado previamente.
lozad ( '.lozad' , {
loaded : function ( el ) {
// Custom implementation on a loaded element
el . classList . add ( 'loaded' ) ;
}
} ) ;Si desea una carga perezosa de elementos agregados dinámicamente:
const observer = lozad ( ) ;
observer . observe ( ) ;
// ... code to dynamically add elements
observer . observe ( ) ; // observes newly added elements as wellPara usar con imágenes receptivas
<!-- responsive image example -->
< img class =" lozad " data-src =" image.png " data-srcset =" image.png 1000w, image-2x.png 2000w " >Para usar con imágenes de fondo
<!-- background image example -->
< div class =" lozad " data-background-image =" image.png " >
</ div >Para usar con múltiples imágenes de fondo
<!-- multiple background image example -->
< div class =" lozad " data-background-image =" path/to/first/image,path/to/second/image,path/to/third/image " >
</ div >Para usar con imágenes de fondo receptivas (set de imagen)
<!-- responsive background image-set example -->
< div class =" lozad " data-background-image-set =" url('photo.jpg') 1x, url('[email protected]') 2x " >
</ div >Para cambiar el delimitador que divide las imágenes de fondo:
<!-- custom delimiter for background images example -->
< div
class =" lozad "
data-background-image =" /first/custom,image,path/image.png-/second/custom,image,path/image.png "
data-background-delimiter =" - "
>
</ div >Si desea cargar las imágenes antes de que aparezcan:
const observer = lozad ( ) ;
observer . observe ( ) ;
const coolImage = document . querySelector ( '.image-to-load-first' ) ;
// ... trigger the load of a image before it appears on the viewport
observer . triggerLoad ( coolImage ) ;A veces, la carga de imágenes lleva mucho tiempo. Para este caso, puede agregar un fondo de marcador de posición:
< img class =" lozad " data-placeholder-background =" red " data-src =" image.png " >Lozad establece un color de fondo de marcador de posición del elemento IMG y los usuarios verán el retroceso hasta que se cargue la imagen.
Cree una estructura de elemento de imagen rota .
¡Es decir, el navegador no es compatible con la etiqueta de imagen! Debe establecer el atributo
data-iesrc(solo para sus etiquetas de imagen) con la fuente para el navegador IE
El atributo
data-altse puede agregar a la etiqueta de imagen para su uso en el atributoaltde imágenes cargadas
<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- NO img element -->
<!-- instead of img element, there will be the last source with the minimum dimensions -->
<!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</ picture >Cuando Lozad carga este elemento de imagen, lo arreglará.
Si desea utilizar el marcador de posición de la imagen (como el marcador de posición de imagen de baja calidad), puede establecer una etiqueta img temporal dentro de su etiqueta picture . Se eliminará cuando Lozad cargue el elemento de imagen.
< picture class =" lozad " style =" display: block; min-height: 1rem " data-iesrc =" images/thumbs/04.jpg " data-alt ="" >
< source srcset =" images/thumbs/04.jpg " media =" (min-width: 1280px) " >
< source srcset =" images/thumbs/05.jpg " media =" (min-width: 980px) " >
< source srcset =" images/thumbs/06.jpg " media =" (min-width: 320px) " >
<!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
< img src =" data:image/jpeg;base64,/some_lqip_in_base_64== " >
</ picture > < video class =" lozad " data-poster =" images/backgrounds/video-poster.jpeg " >
< source data-src =" video/mov_bbb.mp4 " type =" video/mp4 " >
< source data-src =" video/mov_bbb.ogg " type =" video/ogg " >
</ video > < iframe data-src =" embed.html " class =" lozad " > </ iframe > Eso es todo, solo agregue la clase lozad .
< div data-toggle-class =" active " class =" lozad " >
<!-- content -->
</ div > La clase active se alternará en el elemento cuando ingrese a la ventana gráfica del navegador.
Disponible en los últimos navegadores. Si el soporte del navegador no está disponible, haga uso de polyfill.
Para el soporte de IE11, haga uso de estos polyfills.
Consulte el wiki de preguntas frecuentes para obtener algunos gotchas comunes a tener en cuenta mientras usa lozad.js
¿Interesado en contribuir con funciones y soluciones?
Lea más sobre contribuir.
Ver el CangeLog
MIT © Apoorv Saxena
