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>