Framework7 - 惰性加载使用

说明

惰性加载可以应用于图像、背景图像，并具有如下所述的淡入效果 −

对于图像 <img>

若要对图像进行惰性加载，请遵循以下步骤 −

• 使用 data-src 属性代替 src 属性来指定图像源。

• 为图像添加 lazy 类。

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

对于背景图像

还可以对背景图像使用惰性加载，在这种情况下，请遵循以下步骤 −

• 将背景图像源指定到 data-background 中。

• 为图像添加 lazy 类。

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

带有淡入效果

您可以通过将 lazy-fadein 类用于图像/元素来为图像添加淡入效果。

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