Framework7-lazy-load-usage

Framework7-遅延負荷の使用

説明

遅延ロードは、以下に説明するように、画像、背景画像、およびフェードイン効果に適用できます-

画像の場合<img>

画像の遅延ロードを利用するには、所定の手順に従ってください-

• _src_属性の代わりに_data-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>