
內容簡介
這個外掛在篩選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.
