该插件尚未通过WordPress的最新3个主要版本进行测试。 当与较新版本的WordPress一起使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。

下载

Dominant Colors Lazy Loading

作者Manuel Wieser

描述

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 [gallery] 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/.

屏幕截图

安装

  1. Upload dominant-colors-lazy-loading folder to the /wp-content/plugins/ directory.
  2. 通过 WordPress 的“插件”菜单以激活本插件。

常见问题

Why are no dominant colors and tiny thumbnails calculated?

Please make sure that you have installed and activated the imagick PHP extension.

How do I use the custom filter in my themes?

$image = get_the_post_thumbnail( $post_id );
$image = apply_filters( 'dominant_colors', $image, get_post_thumbnail_id ( $post_id ) );
echo $image;

There is an optional third argument, you can use to specify the format. The available formats are stored as constants in the Dominant_Colors_Lazy_Loading class. If you do not specify a format the filter will use the format you have chosen in the plugin settings.

  • FORMAT_GIF will output GIF placeholders.
  • FORMAT_SVG will output SVG placeholders.

  • FORMAT_WRAPPED will output GIF placeholders with wrappers to preserve the aspect ratio of responsive images.

    `

<

div class=”dcll-wrapper” style=”padding-top: 56.25%;”>
<img class="dcll-image"…

“

评价

Perfect

2016 年 9 月 3 日
This is what I was searching for months! Thanks
阅读所有2条评价

贡献者及开发者

“Dominant Colors Lazy Loading” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

「Dominant Colors Lazy Loading」插件已被翻译至 2 种本地化语言。 感谢所有译者为本插件所做的贡献。

将“Dominant Colors Lazy Loading”翻译成您的语言。

对开发感兴趣吗?

您可以浏览代码，查看SVN仓库，或通过RSS订阅开发日志。

更新日志

0.8.0

  • Added an option for <noscript> tags to the admin interface. The tags add a lot of HTML, but they’re great for users with JavaScript disabled and can be good for SEO (your mileage may vary).

0.7.0

  • Added a fallback for images without wp-image-* classes. The plugin can now determine the attachment ID from the image URL, using attachment_url_to_postid. This should add support for plugins like WooCommerce, who don’t output their images with wp-image-* classes. Thanks, @ecksite!

0.6.3

  • The first user interaction triggers a viewport check, that means the first keydown, mousedown, mousemove or touchstart event. Each scroll and resize events still triggers a viewport check.

0.6.2

  • All filters are now disabled for Accelerated Mobile Pages when using Automattic’s AMP plugin.

0.6.1

  • Style attributes set for SVG placeholders are now purged after loading the original images. This fixes an issue where the background color is visible behind transparent PNGs.

0.6.0

  • Added all the functionality needed for tiny thumbnails, including tests. Looking forward to any issues that will inevitably occur 😉

0.5.7

  • Prior to this version wrappers created by the custom filter via FORMAT_WRAPPED were removed from the page after image load. This caused some page jumping, which is why they are now left untouched.

0.5.6

  • Added an optional argument for specifying the placeholder format the custom filter returns.
  • Added a third format (only available via the custom filter) that automatically wraps responsive images so that the placeholder has the right aspect ratio.

0.5.5

  • All files that can’t be processed are now listed during calculation and link to the particular attachment in the media library.

0.5.4

  • Calculation of missing colors should now be able to scale up to millions of images.
  • Admin interface is now split into a tab for placeholder settings and a tab for calculation of missing colors.
  • Replaced placeholders now trigger a viewport check, to see if relayout affected the position of any images.

0.5.3

  • Fixed a bug in displaying whether calculation of an image failed or succeeded.

0.5.2

  • Portuguese translation added by Pedro Mendonça.
  • Simple test suite for admin functions added.
  • Changed all [] array literals to the classic array() for compatibility.

0.5.1

  • Admin interface now shows an error if no ImageMagick PHP extension was found.
  • Admin interface is now ready for translation. There is a .pot file, go crazy 😉
  • German translations for the admin interface added.

0.5.0

  • Added a bulk operation in the settings for calculating missing dominant color meta values for existing images. Until recently colors were only calculated upon initial upload of an image.

0.4.0

  • Filter for lazy-loading images in custom templates and themes added.
  • Added an option to specify a fallback color if no dominant color was found.

0.3.0

  • Added an option to use SVG placeholders as described by Shaw. 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.
  • Images with no dominant color stored in the database are now automatically skipped.

0.2.2

  • Fixed a bug where responsive images weren’t revealed properly.

0.2

  • Galleries added via the default [gallery] shortcode are now also lazy loaded while showing the dominant color of each image as a placeholder.

0.1

  • Initial release — plugin seems to work 😉

额外信息

评级

查看所有评价
登录以提交评价。

支持

有话要说吗？是否需要帮助？

查看支持论坛

捐助

您愿意支持这个插件的发展吗?

捐助此插件