Descarga vanilla lazyload - Descarga del código fuente vanilla lazyload

LazyLoad es un script liviano (2,4 kB) y flexible que acelera su aplicación web al diferir la carga de sus imágenes de la mitad inferior de la página, SVG animados, videos e iframes hasta el momento en que ingresarán a la ventana gráfica . Está escrito en JavaScript simple, aprovecha la API IntersectionObserver, admite imágenes responsivas, optimiza su sitio web para conexiones más lentas y puede habilitar la carga diferida nativa. Vea todas las funciones para obtener más información.

➡️ Saltar a: ?‍ Comenzando - HTML - ?‍ Comenzando - Script - ? Recetas - Demostraciones - ? Consejos y trucos - ? ¿API-? Todas las características comparadas

¿Te encanta este proyecto? ? ¡Cómprame un café!

?‍ Primeros pasos: HTML

Para que LazyLoad cargue su contenido, debe usar algunos atributos data- en lugar de los atributos reales. Ejemplos a continuación.

Imagen perezosa:

 < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />

Imagen perezosa con marcador de posición de baja calidad:

 < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />

Imagen de respuesta diferida con `srcset` y `sizes` :

 < img
  alt =" A lazy image "
  class =" lazy "
  data-src =" lazy.jpg "
  data-srcset =" lazy_400.jpg 400w, 
    lazy_800.jpg 800w "
  data-sizes =" 100w "
/>

Para tener un marcador de posición de baja calidad, agregue el atributo src que apunte a una versión muy pequeña de la imagen. Por ejemplo, src="lazy_10.jpg" .

Imagen de respuesta lenta con soporte de alta resolución usando la etiqueta `picture` :

 < picture >
  < source media =" (min-width: 1200px) " data-srcset =" lazy_1200.jpg 1x, lazy_2400.jpg 2x " />
  < source media =" (min-width: 800px) " data-srcset =" lazy_800.jpg 1x, lazy_1600.jpg 2x " />
  < img alt =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture >

Para tener un marcador de posición de baja calidad, agregue el atributo src que apunta a una versión muy pequeña de la imagen a la etiqueta img . Por ejemplo, src="lazy_10.jpg" .

Imagen de respuesta diferida con selección automática de formato WebP , utilizando la etiqueta `picture` :

 < picture >
  < source
    type =" image/webp "
    data-srcset =" lazy_400.webp 400w, 
      lazy_800.webp 800w "
    data-sizes =" 100w "
  />
  < img
    alt =" A lazy image "
    class =" lazy "
    data-src =" lazy.jpg "
    data-srcset =" lazy_400.jpg 400w, 
      lazy_800.jpg 800w "
    data-sizes =" 100w "
  />
</ picture >

Para tener un marcador de posición de baja calidad, agregue el atributo src que apunta a una versión muy pequeña de la imagen a la etiqueta img . Por ejemplo, src="lazy_10.jpg" .

Imagen de fondo perezosa

NOTA IMPORTANTE : Para mostrar imágenes de contenido en sus páginas, utilice siempre la etiqueta img . Esto beneficiaría el SEO y la accesibilidad de su sitio web. Para saber si sus imágenes son contenido o fondo, pregúntese: "¿Le gustaría al usuario de mi sitio web ver esas imágenes al imprimir la página?". Si la respuesta es "sí", entonces tus imágenes son imágenes de contenido y debes evitar el uso de imágenes de fondo para mostrarlas.

Imagen de fondo única:

 < div class =" lazy " data-bg =" lazy.jpg " > </ div >

Fondo único, con soporte de pantalla HiDPI:

 < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div >

Múltiples orígenes:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Múltiples fondos, soporte de pantalla HiDPI:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc) "
  data-bg-multi-hidpi =" url([email protected]),
    url([email protected]),
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Fondos con `image-set` :

 < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div >

Múltiples fondos con `image-set` :

 < div
  class =" lazy "
  data-bg-set ="
    url('[email protected]') 1x, url('[email protected]') 2x | 
    url('[email protected]') 1x, url('[email protected]') 2x
  "
>
  ...
</ div >

SVG animado perezoso

 < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >

Vídeo perezoso

 < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-poster =" lazy.jpg " >
  < source type =" video/mp4 " data-src =" lazy.mp4 " />
  < source type =" video/ogg " data-src =" lazy.ogg " />
  < source type =" video/avi " data-src =" lazy.avi " />
</ video >

Tenga en cuenta que el póster del vídeo también se puede cargar de forma diferida.

iframe perezoso

 < iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >

¿Te encanta este proyecto? ? ¡Cómprame un café!

?‍ Primeros pasos - Guión

La última versión recomendada de LazyLoad es 19.1.3 . Tenga en cuenta que si necesita compatibilidad con Internet Explorer 11, deberá utilizar la versión 17.9.0 o inferior.

Comprenda rápidamente cómo actualizar desde una versión anterior leyendo la guía práctica de actualización.

La forma más sencilla y fácil

La forma más sencilla de utilizar LazyLoad es incluir el script desde una CDN.

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js " > </ script >

O, si prefieres importarlo como un módulo ES:

 < script type =" module " >
  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >

Luego, en tu código javascript:

 var lazyLoadInstance = new LazyLoad ( {
  // Your custom settings go here
} ) ;

Para asegurarse de que el DOM para su contenido diferido esté listo cuando cree una instancia de LazyLoad, coloque la etiqueta script justo antes de la etiqueta </body> de cierre .

Si llegan más DOM más tarde, por ejemplo, a través de una llamada AJAX, necesitarás llamar lazyLoadInstance.update(); para que LazyLoad vuelva a comprobar el DOM.

 lazyLoadInstance . update ( ) ;

Usando un script `async`

Si lo prefiere, es posible incluir el script de LazyLoad usando un script async e inicializarlo tan pronto como se cargue.

Para ello deberás definir las opciones antes de incluir el script . Puedes pasar:

{} un objeto para obtener una única instancia de LazyLoad
[{}, {}] una matriz de objetos para obtener múltiples instancias de LazyLoad, cada una con diferentes opciones.

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
</ script >

Luego incluya el guión.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

Posiblemente coloque la etiqueta script justo antes de la etiqueta </body> de cierre . Si no puede hacer eso, LazyLoad podría ejecutarse antes de que el navegador haya cargado todo el DOM, y deberá llamar a su método update() para que verifique el DOM nuevamente.

Usar un script `async` + obtener la referencia de la instancia

Igual que el anterior, pero debe colocar el código addEventListener que se muestra a continuación antes de incluir el script async .

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window . addEventListener (
    "LazyLoad::Initialized" ,
    function ( event ) {
      window . lazyLoadInstance = event . detail . instance ;
    } ,
    false
  ) ;
</ script >

Luego incluya el guión.

 < script
  async
  src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js "
> </ script >

Ahora podrás llamar a sus métodos, como:

 lazyLoadInstance . update ( ) ;

DEMOSTRACIÓN - FUENTE ← para una única instancia de LazyLoad

DEMOSTRACIÓN - FUENTE ← para múltiples instancias de LazyLoad

instalación local

Si prefieres instalar LazyLoad localmente en tu proyecto, ¡puedes hacerlo!

Usando npm

 npm install vanilla-lazyload

Usando glorieta

 bower install vanilla-lazyload

Descarga manual

Descargue uno de los últimos lanzamientos. Los archivos que necesita están dentro de la carpeta dist . Si no sabe cuál elegir, utilice lazyload.min.js o lea sobre paquetes.

Uso local

Si instala LazyLoad localmente, puede importarlo como módulo ES como el siguiente:

 import LazyLoad from "vanilla-lazyload" ;

También es posible (pero desaconsejado) utilizar la sintaxis require commonJS.

Más información sobre cómo combinar LazyLoad con WebPack está disponible en este repositorio específico.

Uso con reaccionar

Mire este ejemplo de uso de React con LazyLoad en Sandbox.

Esta implementación toma los mismos accesorios que normalmente pasarías a la etiqueta img , pero genera una imagen diferida. ¡Siéntete libre de bifurcarlo y mejorarlo!

Paquetes

Dentro de la carpeta dist encontrarás diferentes paquetes.

Nombre del archivo	Tipo de módulo	Ventajas
`lazyload.min.js`	UMD (Definición de módulo universal)	Funciona prácticamente en todas partes, incluso en contextos js comunes
`lazyload.iife.min.js`	IIFE (Expresión de función invocada inmediatamente)	Funciona como `<script src="...">` en la página, ~0,5 kb más pequeño que la versión UMD
`esm/lazyload.js`	Módulo ES	Exporta `LazyLoad` para que puedas importarlo en tu proyecto usando `<script type="module" src="...">` y un paquete como WebPack o Rollup

¿Te encanta este proyecto? ? ¡Cómprame un café!

? Recetas

Esta es la sección donde puede encontrar código listo para copiar y pegar para su conveniencia.

Ocultar texto alternativo e imagen vacía

Caso de uso : cuando las imágenes cargadas de forma diferida muestran su texto alt y el icono de imagen vacía antes de cargarlas.

CSS

 img : not ([ src ]) : not ([ srcset ]) {
  visibility : hidden;
}

Sólo eso, de verdad.

Manejo de errores de imagen

Caso de uso : cuando desea evitar que se muestren imágenes inexistentes o rotas en su sitio web.

JavaScript

 var myLazyLoad = new LazyLoad ( {
  // Other options here...
  callback_error : ( img ) => {
    // Use the following line only if your images have the `srcset` attribute
    img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
    img . setAttribute ( "src" , "[email protected]" ) ;
  }
} ) ;

NOTA: si el error fue generado por una red caída (el navegador está temporalmente fuera de línea), vanilla-lazyload intentará cargar las imágenes nuevamente cuando la red vuelva a estar disponible.

EJEMPLO: API

Contenido dinámico

Caso de uso : cuando desea cargar imágenes de forma diferida, pero la cantidad de imágenes cambia en el área de desplazamiento, tal vez porque se agregan de forma asincrónica.

JavaScript

 var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;

DEMOSTRACIÓN - FUENTE - API

Carga diferida mixta nativa y basada en JS

Caso de uso : desea utilizar la opción use_native para delegar la carga de imágenes, iframes y videos al motor del navegador cuando sea compatible, pero también desea cargar imágenes de fondo de manera diferida.

HTML

 < img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >

JavaScript

 // Instance using native lazy loading
const lazyContent = new LazyLoad ( {
  use_native : true // <-- there you go
} ) ;

// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
  // DON'T PASS use_native: true HERE
} ) ;

DEMOSTRACIÓN - FUENTE - API

Paneles de desplazamiento

Caso de uso : cuando su contenedor de desplazamiento no es la ventana principal del navegador, sino un contenedor de desplazamiento.

HTML

 < div class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

JavaScript

 var myLazyLoad = new LazyLoad ( {
  container : document . querySelector ( ".scrollingPanel" )
} ) ;

DEMOSTRACIÓN - FUENTE - API

Si tiene varios paneles de desplazamiento, puede utilizar el siguiente código y marcado.

HTML

 < div id =" scrollingPanel1 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

JavaScript

 var myLazyLoad1 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel1" )
} ) ;
var myLazyLoad2 = new LazyLoad ( {
  container : document . getElementById ( "scrollingPanel2" )
} ) ;

DEMOSTRACIÓN - FUENTE - API

Funciones perezosas

Caso de uso : cuando desea ejecutar scripts o funciones arbitrarias cuando elementos determinados ingresan a la ventana gráfica

HTML

 < div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >

 // It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
  foo : function ( element ) {
    element . style . color = "red" ;
    console . log ( "foo" ) ;
  } ,
  bar : function ( element ) {
    element . remove ( element ) ;
    console . log ( "bar" ) ;
  } ,
  buzz : function ( element ) {
    var span = document . createElement ( "span" ) ;
    span . innerText = " - buzz!" ;
    element . appendChild ( span ) ;
    console . log ( "buzz" ) ;
  } ,
  booya : function ( element ) {
    element . classList . add ( "boo" ) ;
    console . log ( "booya" ) ;
  }
} ;

 function executeLazyFunction ( element ) {
  var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
  var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
  if ( ! lazyFunction ) return ;
  lazyFunction ( element ) ;
}

var ll = new LazyLoad ( {
  unobserve_entered : true , // <- Avoid executing the function multiple times
  callback_enter : executeLazyFunction // Assigning the function defined above
} ) ;

Utilice unobserve_entered para evitar ejecutar la función varias veces.

Eso es todo. Siempre que un elemento con el atributo data-lazy-function ingresa a la ventana gráfica, LazyLoad llama a la función executeLazyScript , que obtiene el nombre de la función del propio atributo data-lazy-function y la ejecuta.

DEMOSTRACIÓN - FUENTE - API

Inicialización diferida de múltiples instancias de LazyLoad

Caso de uso : cuando tiene muchos contenedores que se desplazan horizontalmente y desea crear una instancia de LazyLoad en ellos, pero solo cuando ingresaron a la ventana gráfica.

HTML

 < div class =" horizContainer " >
  < img
    src =""
    alt =" Row 01, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 01, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >
< div class =" horizContainer " >
  < img
    src =""
    alt =" Row 02, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 02, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >

JavaScript

 var lazyLoadInstances = [ ] ;

var initOneLazyLoad = function ( horizContainerElement ) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad ( {
    container : horizContainerElement
  } ) ;
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances . push ( oneLL ) ;
} ;

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
  elements_selector : ".horizContainer" ,
  callback_enter : initOneLazyLoad ,
  unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ;

Eso es todo. Siempre que un elemento .horizContainer ingresa a la ventana gráfica, LazyLoad llama a la función initOneLazyLoad , que crea una nueva instancia de LazyLoad en el elemento .horizContainer .

DEMOSTRACIÓN - FUENTE - API

¿Te encanta este proyecto? ? ¡Cómprame un café!

Población

¿No encontraste la receta que se adapta exactamente a tu caso? ¡Tenemos demostraciones!

La carpeta de demostraciones contiene más de 30 casos de uso de vanilla-lazyload. Quizás allí encuentres lo que buscas.

Tipo	Título	Código	Manifestación
Contenido	Imágenes simples cargadas de forma diferida, sin utilizar ningún marcador de posición	Código	Vivir
Contenido	Imágenes perezosas que utilizan un SVG en línea como marcador de posición	Código	Vivir
Contenido	Imágenes perezosas que utilizan un archivo SVG externo como marcador de posición	Código	Vivir
Contenido	Imágenes con capacidad de respuesta lenta con `srcset`	Código	Vivir
Contenido	Imágenes perezosas con respuesta con la etiqueta `<picture>` y el atributo `media` (dirección de arte)	Código	Vivir
Contenido	Imágenes con capacidad de respuesta diferida con `srcset` y `sizes` (usando `data-sizes` )	Código	Vivir
Contenido	Imágenes con capacidad de respuesta diferida con `srcset` y `sizes` (usando `sizes` simples)	Código	Vivir
Contenido	Vídeo lento con múltiples etiquetas `<source>` , diferentes opciones de precarga, SIN reproducción automática	Código	Vivir
Contenido	Vídeo lento con múltiples etiquetas `<source>` , diferentes opciones de precarga, CON reproducción automática	Código	Vivir
Contenido	Imágenes de fondo de carga diferida	Código	Vivir
Contenido	Carga diferida de varias imágenes de fondo	Código	Vivir
Contenido	Carga diferida de imágenes de fondo con `image-set()`	Código	Vivir
Contenido	iframes de carga diferida	Código	Vivir
Contenido	Carga diferida de archivos SVG y PDF animados	Código	Vivir
Contenido	Imágenes Lazy WebP con la etiqueta `<picture>` y el atributo `type` para WebP	Código	Vivir
Cargando	Carga asincrónica LazyLoad con `<script async>`	Código	Vivir
Cargando	Carga asincrónica de múltiples instancias de LazyLoad con `<script async>`	Código	Vivir
Error	Comportamiento de carga de error de prueba cuando `restore_on_error` es `false`	Código	Vivir
Error	Comportamiento de carga de error de prueba cuando `restore_on_error` es `true`	Código	Vivir
Técnica	Las imágenes se desvanecen a medida que se cargan.	Código	Vivir
Técnica	Carga diferida de imágenes en controles deslizantes horizontales solo CSS (estilo Netflix)	Código	Vivir
Técnica	Cree instancias de Swiper de manera perezosa y cargue imágenes de Swiper de manera perezosa	Código	Vivir
Técnica	Ejecutar funciones de forma perezosa a medida que elementos específicos ingresan a la ventana gráfica	Código	Vivir
Técnica	Cómo gestionar la impresión de una página con imágenes perezosas	Código	Vivir
Técnica	Una capa emergente que contiene imágenes diferidas en un contenedor de desplazamiento	Código	Vivir
Ajustes	Múltiples contenedores de desplazamiento	Código	Vivir
Ajustes	Contenedor de desplazamiento único	Código	Vivir
Métodos	Cómo `restore()` DOM a su estado original y/o `destroy()` LazyLoad	Código	Vivir
Métodos	Agregar contenido dinámico, luego `update()` LazyLoad	Código	Vivir
Métodos	Agregar contenido dinámico, luego `update()` LazyLoad pasando un NodeSet de elementos	Código	Vivir
Métodos	Cargue imágenes puntuales usando el método `load()`	Código	Vivir
Métodos	Cargue todas las imágenes a la vez usando `loadAll()`	Código	Vivir
Prueba	Prueba de múltiples umbrales	Código	Vivir
Prueba	Comportamiento de prueba con imágenes ocultas.	Código	Vivir
Prueba	Prueba de rendimiento, carga diferida de cientos de imágenes.	Código	Vivir
Nativo	Pruebe la carga diferida nativa de imágenes SIN ninguna línea de javascript, ni siquiera este script	Código	Vivir
Nativo	Pruebe la carga diferida nativa de imágenes de forma condicional utilizando la opción `use_native` (consulte API)	Código	Vivir

¿Te encanta este proyecto? ? ¡Cómprame un café!

? Consejos y trucos

Expandir

vanilla lazyload

?‍ Primeros pasos: HTML

Imagen perezosa:

Imagen perezosa con marcador de posición de baja calidad:

Imagen de respuesta diferida con srcset y sizes :

Imagen de respuesta lenta con soporte de alta resolución usando la etiqueta picture :

Imagen de respuesta diferida con selección automática de formato WebP , utilizando la etiqueta picture :

Imagen de fondo perezosa

Imagen de fondo única:

Fondo único, con soporte de pantalla HiDPI:

Múltiples orígenes:

Múltiples fondos, soporte de pantalla HiDPI:

Fondos con image-set :

Múltiples fondos con image-set :

SVG animado perezoso

Vídeo perezoso

iframe perezoso

?‍ Primeros pasos - Guión

La forma más sencilla y fácil

Usando un script async

Usar un script async + obtener la referencia de la instancia

instalación local

Usando npm

Usando glorieta

Descarga manual

Uso local

Uso con reaccionar

Paquetes

? Recetas

Ocultar texto alternativo e imagen vacía

Manejo de errores de imagen

Contenido dinámico

Carga diferida mixta nativa y basada en JS

Paneles de desplazamiento

Funciones perezosas

Inicialización diferida de múltiples instancias de LazyLoad

Población

? Consejos y trucos

Imagen de respuesta diferida con `srcset` y `sizes` :

Imagen de respuesta lenta con soporte de alta resolución usando la etiqueta `picture` :

Imagen de respuesta diferida con selección automática de formato WebP , utilizando la etiqueta `picture` :

Fondos con `image-set` :

Múltiples fondos con `image-set` :

Usando un script `async`

Usar un script `async` + obtener la referencia de la instancia