前言介紹
- 這款 WordPress 外掛「Native Image Lazy Loading」是 2019-05-20 上架。
- 目前有 20 個安裝啟用數。
- 上一次更新是 2019-05-21，距離現在已有 2176 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 4.5 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 5.1 以上。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
jdm-labs |
外掛標籤
images | loading | lazyload | lazy load | performance |
內容簡介
這個外掛在篩選the_content()時給IMG標籤加上loading屬性，以支援原生圖片懶加載。
有關使用這個新的瀏覽器圖片屬性進行圖片懶加載的更多信息，請參閱本文：https://addyosmani.com/blog/lazy-loading/，並了解我們在這裡所做的一些更詳細的解釋文章explainer post。
從歷史上看，為了限制屏幕外圖像對頁面加載時間的影響，開發人員需要使用JavaScript庫（如LazySizes或Vanilla-LazyLoad）來推遲提取這些圖像，直到用戶滾動到其附近。如果瀏覽器可以為您避免加載這些屏幕外圖片呢？
loading屬性指示瀏覽器推遲加載屏幕外圖像，直到用戶滾動到其附近。它有三種選項：eager、auto和lazy。安裝此外掛後，可以在外掛的設置頁面中設置第一個圖像的loading屬性和所有通過 the_content()發送的後續圖像的loading屬性。
簡單就是美麗
這個外掛沒有包含任何JavaScript或CSS。在支持新的loading圖像屬性的瀏覽器中即可使用。
對於不支持這個新的圖片加載屬性的瀏覽器，沒關係。在瀏覽器支持變得更加主流之前，仍然可以使用任何JavaScript基礎的圖像懶加載器作為後備。
原文外掛簡介
This plugin adds the loading attribute to IMG tags found when filtering the_content() to support native image lazy loading.
For more information about lazy loading images using this new native browser image attribute, check out this article: https://addyosmani.com/blog/lazy-loading/ and for a little more depth into what we’re doing here, check out our explainer post.
Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library (like LazySizes or Vanilla-LazyLoad) in order to defer fetching these images until a user scrolls near them. What if the browser could avoid loading these offscreen images for you?
The loading attribute instructs a browser to defer loading offscreen images until users scroll near them. It comes in three flavors: eager, auto, and lazy. Install this plugin and you can set the first image’s loading attribute and the loading attribute for all the subsequent images sent through the_content() in the plugin’s settings page.
Simple is Beautiful
There is no JavaScript or CSS included in the plugin. It just works in browsers that support the new loading image attribute.
For browsers that don’t support this new image loading attribute, that’s ok. You can still use whatever JavaScript-based image lazy loader you want as a fallback until browser support becomes a little more mainstream.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Native Image Lazy Loading」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Preloader 》 頁面預載器 (Preloader), 輕鬆為您的網站添加預載器，與所有主要瀏覽器兼容。, 主要特點, , 高清規格支援 (根據圖片大小而定)。, 自定義背景顏色。, 10 種選...。
Safelayout Cute Preloader – CSS3 WordPress Preloader 》一個易於使用、輕量級且功能強大的預載入外掛程式。Safelayout Cute Preloader 幫助您在網站上添加美麗的動畫預載入。, 功能, , 純 CSS 動畫。, 29 種載入動...。
Native Lazyload 》此外掛使用內建的瀏覽器功能來進行延遲加載媒體。如需了解更多關於新 loading 屬性的資訊，請參閱此處，或檢視 WordPress 核心票證中討論將類似的實作加入 Wo...。
Flat Preloader 》Flat Preloader 是一款可幫助您創建具有多個精彩 GIF 圖示的加載頁面的 WordPress 外掛。, 您可以選擇顯示加載頁面的位置，例如首頁或全部頁面。, 功能請求 ...。
Preloader Awesome – Page Loading Animation with Spinner & Gif 》PRELOADER AWESOME – WORDPRESS 預載器外掛, Preloader Awesome 是一個出色的 WordPress 預載器外掛，可以幫助您在 WordPress 網站頁面加載期間創建頁面載入...。
WP Page Loading 》WP Page Loading 外掛可以幫助您在網站加載前加上動畫，在頁面加載之前容易地添加動畫。您可以自定義動畫和背景顏色。, 10+ 佈局 - 簡單、輕量又好用！輕鬆為...。
Crazy Lazy 》警告：Crazy Lazy 已經到達生命週期的終點。WordPress 5.5+ 支援使用本地 HTML loading 屬性的核心延遲加載圖像，請使用替代外掛 Lazy Loader。, Crazy Lazy ...。
KCSG Kartra Pages 》KCSG Kartra Pages (KKP) 是 Kartra 專用的 WordPress 外掛，用來嵌入 Kartra Page Builder 頁面至 WordPress 網站，而非使用 Kartra 原始建議中的通用 Blank...。
AI Preloader 》AI Preloader動畫能夠在網頁載入期間顯示一個專業的等待畫面，令使用者的第一印象更好。它向使用者展示您致力於提供高質量體驗，同時亦不會遺漏任何細節。, ...。
Loading Bar 》載入進度條, 輕鬆地為您的網站添加載入進度條，就像 YouTube 的載入條一樣！只需點擊一下即可自定義進度條顏色和響應式設計。, 功能, , 易於使用，只需點擊一...。
WP PleaseWait – Loading Screen 》WP PleaseWait 是一款 WordPress 擴充功能，使用 pleasewait 函式庫。, PleaseWait 是一個小型的 JavaScript 函式庫，可以在 SPA 載入時顯示美觀的載入頁面。...。
While Loading 》這個外掛會顯示一個畫面當所有內容載入。若你的網頁需要較長時間才能顯示，建議使用「等待頁面載入」的圖片。這樣可以讓使用者看到訊息和圖示，而不是看到部...。
Brozzme Material Loading 》Brozzme Material Loading是一個WordPress外掛，可以輕鬆地添加自動頁面加載進度條，就像YouTube的加載條一樣。, 該插件已經開發出來，以提高在任何主題中的...。
WP Pace 》建立自動頁面載入進度條。基於Pace-自動頁面載入進度條。Javascript由Zack Bloom提供，CSS由Adam Schwartz提供。主題靈感來自於Mary Lou。, 在此處查看工作演...。
LoadGo for WP 》利用您的標誌作為您的網站/部落格的載入器。基於Pace-自動頁面加載進度條，使用LoadGo Javascript外掛。, 這裡可以查看實際演示：http://franverona.com/wplo...。