- Framework7 教程
- Framework7 - 主頁
- Framework7 - 概述
- Framework7 - 環境
- Framework7 元件
- Framework7 - 佈局
- Framework7 - 導航欄
- Framework7 - 工具欄
- Framework7 - 搜尋欄
- Framework7 - 狀態列
- Framework7 - 側面板
- Framework7 - 內容塊
- Framework7 - 佈局網格
- Framework7 - 覆蓋
- Framework7 - 預載入
- Framework7 - 進度條
- Framework7 - 列表檢視
- Framework7 - 摺疊
- Framework7 - 卡片
- Framework7 - 晶片
- Framework7 - 按鈕
- Framework7 - 操作按鈕
- Framework7 - 表單
- Framework7 - 標籤
- Framework7 - Swiper 滑塊
- Framework7 - 照片瀏覽器
- Framework7 - 自動完成
- Framework7 - 選擇器
- Framework7 - 日曆
- Framework7 - 重新整理
- Framework7 - 無限滾動
- Framework7 - 訊息
- Framework7 - 訊息欄
- Framework7 - 通知
- Framework7 - 惰性載入
- Framework7 樣式
- Framework7 - 配色主題
- Framework7 - 髮絲
- Framework7 模板
- Framework7 - 模板概述
- Framework7 - 自動編譯
- Framework7 - Template7 頁面
- Framework7 快速點選
- Framework7 - 活動狀態
- Framework7 - 輕擊停留事件
- Framework7 - 觸控漣漪
- Framework7 有用資源
- Framework7 - 快速指南
- Framework7 - 有用資源
- Framework7 - 討論
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.htm
廣告