這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

Native Image Lazy Loading

外掛說明

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.

螢幕擷圖

  • The Settings Page

安裝方式

  1. Install Native Image Lazy Loading from the WordPress repo
  2. Activate the plugin through the Plugins menu
  3. Configure in Settings >> Native Lazy Loading
  4. Marvel at its simplicity

常見問題集

Does this add any JS?

Nope. If you’re using another JS-based lazy loader, that’ll just keep working as it did. If the browser doesn\’t support the loading attribute, it’ll just ignore it and process per usual.

Where is the Settings Page?

In version 1.0 there wan’t one, but thanks to a suggestion by @verlok, there IS one in v1.1. You’ll find it at Settings >> Native Lazy Loading.

使用者評論

2019 年 10 月 26 日
The great things are: - very light plugin with no commercial adv or whatsoever... - Yes, it replaces <img with <img loading="lazy" But... - it replaced only 9 <img on 41 on my page ... anyway, thanks for trying to do the web a better place!
閱讀全部 1 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Native Image Lazy Loading〉的開發相關工作。

參與者

將 Native Image Lazy Loading 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.1

  • Added Settings Page
  • Added Option to select the loading="" attribute

1.0

  • First release.