Title: SmoothPreview
Author: sarfaraz23
Published: <strong>2026 年 8 月 19 日</strong>
Last modified: 2026 年 8 月 19 日

---

搜索插件

![](https://ps.w.org/smoothpreview/assets/banner-772x250.png?rev=3655169)

![](https://ps.w.org/smoothpreview/assets/icon-256x256.png?rev=3655169)

# SmoothPreview

 作者：[sarfaraz23](https://profiles.wordpress.org/sarfaraz23/)

[下载](https://downloads.wordpress.org/plugin/smoothpreview.1.0.0.zip)

 * [详情](https://cn.wordpress.org/plugins/smoothpreview/#description)
 * [评价](https://cn.wordpress.org/plugins/smoothpreview/#reviews)
 *  [安装](https://cn.wordpress.org/plugins/smoothpreview/#installation)
 * [开发进展](https://cn.wordpress.org/plugins/smoothpreview/#developers)

 [支持](https://wordpress.org/support/plugin/smoothpreview/)

## 描述

**SmoothPreview** brings modern app-style loading placeholders to your WordPress
and WooCommerce media galleries.

Instead of displaying blank white boxes or causing sudden vertical jumps while images
download, SmoothPreview calculates the photo’s exact dominant RGB color and locks
image aspect ratio server-side to guarantee **0 Cumulative Layout Shift (0 CLS)**.

#### Key Features

 * 🎨 **Adaptive Dominant Color Extraction**: Instantly samples photo colors in 
   less than 1 millisecond.
 * ⬛ **Classic Light Grey Skeleton Box**: Clean minimal loading placeholder mode.
 * ✨ **5 Shimmer Motion Directions**: Horizontal (LTR/RTL), Vertical (TTB/BTT),
   and Diagonal wave flashes.
 * 📐 **0 Layout Shift (CLS Prevention)**: Hard-locks image container aspect ratios.
 * 🛡️ **Admin Workflow Bypass**: Automatically bypasses preview effects while editing
   pages in WP Admin.
 * 🌙 **Auto Dark Mode**: Detects visitor dark mode preferences automatically.
 * ⚡ **Ultra Lightweight**: Zero external library dependencies, 100% PHP & CSS 
   native.

## 安装

 1. Upload the `smooth-preview` directory to `/wp-content/plugins/`.
 2. Activate the plugin through the ‘Plugins’ menu in WordPress.
 3. Go to **Settings > SmoothPreview** to customize your preferred shimmer direction
    and placeholder style.

## 常见问题

### Does SmoothPreview work with WooCommerce?

Yes! SmoothPreview is 100% compatible with WooCommerce shop grids, product loops,
and single product image galleries.

### Does this plugin slow down page speed?

No. Dominant color extraction is cached in post metadata and runs in less than 1ms.

## 评价

此插件暂无评价。

## 贡献者及开发者

「SmoothPreview」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ sarfaraz23 ](https://profiles.wordpress.org/sarfaraz23/)

[帮助将「SmoothPreview」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/smoothpreview)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/smoothpreview/)，查看
[SVN仓库](https://plugins.svn.wordpress.org/smoothpreview/)，或通过[RSS](https://plugins.trac.wordpress.org/log/smoothpreview/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/smoothpreview/)。

## 更新日志

#### 1.0.0

 * Initial public release on WordPress.org.

## 额外信息

 *  版本 **1.0.0**
 *  最后更新：**2 周前**
 *  活跃安装数量 **不到10**
 *  WordPress 版本 ** 5.8 或更高版本 **
 *  已测试的最高版本为 **7.0.4**
 *  PHP 版本 ** 7.4 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/smoothpreview/)
 * 标签
 * [dominant color](https://cn.wordpress.org/plugins/tags/dominant-color/)[lazy load](https://cn.wordpress.org/plugins/tags/lazy-load/)
   [placeholder](https://cn.wordpress.org/plugins/tags/placeholder/)[skeleton loader](https://cn.wordpress.org/plugins/tags/skeleton-loader/)
   [woocommerce](https://cn.wordpress.org/plugins/tags/woocommerce/)
 *  [高级视图](https://cn.wordpress.org/plugins/smoothpreview/advanced/)

## 评级

尚未提交反馈。

[您的评价](https://wordpress.org/support/plugin/smoothpreview/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/smoothpreview/reviews/)

## 贡献者

 *   [ sarfaraz23 ](https://profiles.wordpress.org/sarfaraz23/)

## 支持

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

 [查看支持论坛](https://wordpress.org/support/plugin/smoothpreview/)