[WordPress] 外掛分享: Lazy Loader

首頁外掛目錄 › Lazy Loader
WordPress 外掛 Lazy Loader 的封面圖片
10,000+
安裝啟用
★★★★
4.7/5 分(49 則評價)
703 天前
最後更新
問題解決
WordPress 4.9.8+ PHP 7.0+ v8.2.0 上架:2015-11-30

內容簡介

這款懶加載外掛支援圖片、iFrame、影片和音訊元素,使用輕量級的 lazysizes 腳本。手動修改標記也可以實現懶加載背景圖片、腳本和樣式。

以下元素會自動懶加載(不需要任何手動修改):

在文章、頁面、自訂文章類型、文字小工具等中使用 img 或 picture 插入的圖片
文章縮略圖
內聯背景圖片
所有其他在標記中啟用(未排除或已有懶加載屬性)的圖片和其他媒體,透過處理完整的標記選項。
iFrame*。
影片元素*。
音訊元素*。

* 可以在外掛選項中啟用。

該插件提供以下選項(在「設置」›「媒體」›「懶加載選項」下):

不要懶加載具有特定 CSS 類別的元素(默認可以使用 class 為 skip-lazy 的類別)。
添加應由 Lazy Loader 處理的篩選器。
啟用 iFrame 的懶加載。
包括 lazysizes 原生加載插件,這可以修改圖片和 iFrame 以使用已經支援的瀏覽器原生的懶加載功能。
包括 lazysizes unveilhooks 插件,添加了對更多元素的支援,例如,影片和音訊元素*。
啟用影片元素的海報框懶加載。
啟用音訊元素的懶加載。
啟用內聯背景圖片的懶加載。
顯示加載旋轉圖示。
在特定的文章/頁面禁用插件(這會在所有公開文章類型的編輯檢視中顯示一個核取方塊(除了附件),以禁用整個文章的懶加載)。
處理網站的完整標記。
一個文本區域可以修改預設的 lazysizes 配置值。

* lazysizes 的 unveilhooks 擴展支援不只影片和音訊元素,但需要手動修改標記來使用以下元素:

未使用內聯樣式插入的背景圖片
腳本。
樣式。

該插件為禁用 JavaScript 的使用者提供了 noscript 元素回退。

您可以通過在外掛設置(「設置」›「媒體」›「懶加載選項」)中定義特定 CSS 類別來禁用特定 CSS 類別的元素的懶加載。或使用 skip-lazy 類別或 data-skip-lazy 屬性。skip-lazy 和 data-skip-lazy 也可以在包含元素上運作,以排除包含元素及其子元素的處理。

外掛標籤

開發者團隊

⬇ 下載最新版 (v8.2.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Lazy Loader」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Lazy loading plugin that supports images, iFrames, video and audio elements and uses the lightweight lazysizes script. With manual modification of the markup it is also possible to lazy load background images, scripts, and styles.
Lazy loads (without the need of any manually modifications):

Images inserted via img or picture in posts, pages, Custom Post Types, Text Widgets, …
Post thumbnails.
Inline background images.
Or all images and other enabled media in the markup (that is not excluded or already has a lazy loading attribute), via the option to process the complete markup.
iFrames.*
Video elements.*
Audio elements.*

* Can be enabled in the plugin options.
The plugin comes with the following options (under Settings › Media › Lazy Loader options):

Do not lazy load elements with specific CSS classes (you can use the class skip-lazy by default).
Add filters that should be processed by Lazy Loader.
Enable lazy loading for iFrames.
Include the lazysizes native loading plugin that modifies images and iFrames to use the native lazy loading feature of browsers that already support it.
Include the lazysizes unveilhooks plugin that adds support for more elements, for example, video and audio elements.*
Enable lazy loading for the poster frame of video elements.
Enable lazy loading for audio elements.
Enable lazy loading for inline background images.
Display a loading spinner.
Disable the plugin on specific posts/pages (this shows a checkbox in the edit view of all public post types (except attachments) to disable lazy loading for an entire post).
Process the complete markup of the site.
A textarea to modify the default lazysizes config values.

* The unveilhooks extension of lazysizes supports more than video and audio elements, but you need to manually modify the markup to use it for:

Background images not inserted with inline styles.
Scripts.
Styles.

The plugin adds a noscript element as fallback for disabled JavaScript (can be disabled with the lazy_loader_generate_noscript filter).
You can disable lazy loading for elements with specific CSS classes by defining them via the plugin settings (Settings › Media › Lazy Loader options). Or use the skip-lazy class or the data-skip-lazy attribute. skip-lazy and data-skip-lazy also work on wrapper elements to exclude the wrapper and its children from being processed.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon