Framework7 - Uso de carga diferida

Descripción

La carga diferida se puede aplicar a imágenes, imágenes de fondo y con efecto de aparición gradual como se describe a continuación:

Para imágenes <img>

Para hacer uso de la carga diferida en las imágenes, siga los pasos dados:

  • Utilice el atributo data-src en lugar del atributo src para especificar la fuente de la imagen.

  • Agregue la clase perezosa a la imagen.

<div class = "page-content">
   ...
   <img data-src = "image_path.jpg" class = "lazy">
   ...
</div>

Para imágenes de fondo

La carga diferida también se puede utilizar para imágenes de fondo, para este caso siga los pasos dados:

  • Especifique la fuente de la imagen de fondo en el fondo de datos .

  • Agregue la clase perezosa a la imagen.

<div class = "page-content">
   ...
   <div data-background = "image_path.jpg" class = "lazy">
      ...
   </div>
   ...
</div>

Con efecto de fundido

Puede agregar un efecto de aparición gradual a sus imágenes utilizando la clase lazy-fadein a image / element.

<div class = "page-content">
   ...
   <img data-src = "image_path.jpg" class = "lazy lazy-fadein">
   <div data-background = "image_path.jpg" class = "lazy lazy-fadein">
      ...
   </div>
   ...
</div>