Framework7 - Uso de carregamento lento

Descrição

O carregamento lento pode ser aplicado a imagens, imagens de fundo e com efeito fade-in conforme descrito abaixo -

Para imagens <img>

Para fazer uso do carregamento lento nas imagens, siga as etapas fornecidas -

• Use o atributo data-src em vez do atributo src para especificar a origem da imagem.

• Adicionar classe preguiçoso à imagem.

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

Para imagens de fundo

O carregamento lento também pode ser usado para imagens de fundo; neste caso, siga as etapas fornecidas -

• Especifique a origem da imagem de fundo em dados de fundo .

• Adicionar classe preguiçoso à imagem.

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

Com efeito Fade-in

Você pode adicionar efeito de fade-in às suas imagens usando a classe lazy-fadein para imagem / elemento.

<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>