Framework7 - Lazy Load Usage

Description

The lazy load can be applied to images, background images and with fade-in effect as described below −

For images <img>

To make use of lazy load on images follow the given steps −

• Use data-src attribute instead of src attribute to specify image source.

• Add class lazy to image.

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

For Background Images

Lazy load can also be used for background images, for this case follow the given steps −

• Specify background image source into data-background.

• Add class lazy to image.

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

With Fade-in Effect

You can add fade-in effect to your images by using the lazy-fadein class to 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>