延迟加载

描述 (Description)

延迟加载可应用于图像，背景图像和淡入效果，如下所述 -

对于图像

要在图像上使用延迟加载，请按照给定的步骤进行操作 -

• 使用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>