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>

framework7_lazy_load.html