[WordPress] 外掛分享： Dominant Colors Lazy Loading

內容簡介

這個外掛允許您在執行圖片懶加載時，將每個圖片的主要顏色作為預留區塊顯示，就像 Pinterest 或 Google Images。它還允許您使用微小縮略圖作為占位符。如果您想知道它的工作方式，請閱讀文章「Dominant Colors for Lazy-Loading Images」，其中我解釋了一般概念。

為了確保插件的質量，如果您遇到任何問題，請讓我知道。我會迅速回覆並盡快解決問題！

功能

該插件在上傳時計算圖像的主色彩。
所有附加到文章和頁面上的圖像都會自動替換為占位符，當它們進入視口時立即加載，以節省帶寬。
通過默認的 短代碼添加的圖庫也會被替換並在它們出現在視窗口時加載。
可以在模板和主題中使用用於懶加載縮略圖或特色圖像的自定義篩檢器 (apply_filters（'dominant_colors'，$image，$id）)。
插件設置中可以計算現有附件的主色彩。

已經通過了數千個圖像的測試。
在計算完成之前，您可以為您的預留區塊指定後備顏色。
在計算期間，所有無法處理的文件都會在媒體庫中連結到特定的附件並列出。

您可以選擇GIF或SVG占位符。

SVG 占位符與原始圖像具有相同的像素大小和長寬比，而不是單一正方形像素。這樣，響應式圖像不需要包裹器來保留原始長寬比。
GIF 占位符很小，與浏覽器兼容良好。它們還允許您使用在manu.ninja上描述的微小縮略圖來處理圖像。
您可以將微小縮略圖的分辨率設定為 3×3 像素（120 字節）、4×4 像素（128 字節）或 5×5 像素（204 字節）。

插件與RICG Responsive Images兼容，這已經成為WordPress 4.4的默認功能。

演示

您可以在http://www.karriere.at/blog/上實時查看此插件。

外掛標籤

開發者團隊

原文外掛簡介

This plugin allows you to lazy load your images while showing the dominant color of each image as a placeholder – like Pinterest or Google Images. It also enables you to use tiny thumbnails as placeholders. If you want to know how it works read the article Dominant Colors for Lazy-Loading Images, where I explain the general concept.
To ensure the quality of the plugin please let me know if you encounter any issues. I will reply swiftly and fix them as soon as possible!
Features

The plugin calculates the dominant color of an image upon upload.
All images attached to posts and pages are automatically replaced with placeholders and load as soon as they enter the viewport to save bandwidth.
Galleries added via the default shortcode are also replaced and loaded as soon as they appear in the viewport.
A custom filter for lazy-loading thumbnails or featured images can be used in templates and themes (apply_filters( 'dominant_colors', $image, $id )).
Dominant colors can be calculated for all existing attachments in the plugin settings.

This has already been tested with thousands of images.
Until the calculation is done you can specify a fallback color for your placeholders.
All files that can’t be processed are listed during calculation and link to the particular attachment in the media library.

You can choose between GIF and SVG placeholders.

SVG placeholders have the same pixel size and aspect ratio as the original images, instead of being a single square pixel. This way responsive images do not need a wrapper for preserving the original aspect ratio.
GIF placeholders are small and have great browser compatibility. They also enable you to use tiny thumbnails as described on manu.ninja for your images.
You can set the resolution of tiny thumbnails to 3×3 pixels (120 bytes), 4×4 pixels (128 bytes) or 5×5 pixels (204 bytes).

The plugin is compatible with RICG Responsive Images, which has been added to WordPress 4.4 as default functionality.

Demo
You can see the plugin live at http://www.karriere.at/blog/.