Image Preloading (WordPress 插件)

该插件允许您使用现代JavaScript Promise或标准HTML链接头来预加载关键图像。它设计轻量、对开发者友好，并与WordPress生态系统完全集成。

Image Preloading (WordPress Plugin)

✨ 主要功能

双重预加载方式：可在JavaScript预加载、HTML <link rel="preload"> 头部标签之间选择，或两者结合使用以获得最佳兼容性。
性能优先：利用 requestIdleCallback 以尊重浏览器资源和主线程活动。
智能条件逻辑：精细控制脚本加载位置（例如特定文章类型、归档页面），并支持基于ID的页面排除。
稳健架构：基于Promise的加载机制，包含并发控制、错误处理和输入净化功能。
无缝集成：原生WordPress管理界面，支持多语言翻译，并自动迁移旧版本设置。

系统要求

组件	最低版本
WordPress	5.0+
PHP	7.2+
MySQL	5.6+

快速入门指南

安装

下载插件包。
将 image-preloading 文件夹上传到您服务器的 wp-content/plugins/ 目录。
登录 WordPress 并导航至插件页面。
找到 图片预加载 插件并点击启用。

基本配置

导航至设置 → 图像预加载。
使用主开关启用插件。
将希望预加载的图片完整URL粘贴到图片URL框中（每行一个）。
选择预加载方法（推荐：两者）。
点击保存更改。

⚙️ 配置选项

1. 预加载方法

选择最符合您性能需求的策略：

JavaScript (JS): 使用现代Promise技术加载图片。具备错误处理和并发限制功能。最适合动态加载控制。
链接预加载 (Header): 向文档的<head>中注入标准的<link rel="preload">标签。这是现代浏览器尽早发现关键资源的最快方法。
两者结合 (推荐): 结合两种方法，确保在现代浏览器上获得高性能，同时保留JavaScript回退和验证系统。

2. URL 管理

为您的图片输入绝对URL。可以使用外部域名（如CDN）。

格式示例:

https://example.com/images/logo.png
https://example.com/assets/hero-banner.jpg
https://cdn.external-site.com/campaign-graphic.webp

3. 条件加载

精确控制预加载器的运行位置，避免在不相关的页面上浪费带宽。

加载位置：

所有页面：（默认）在所有页面运行。
首页：仅限网站首页。
博客文章页面：最新文章的主要动态页面。
单篇文章 / 页面 / 归档页面：针对特定的内容类型。
排除页面：输入一个逗号分隔的页面或文章ID列表，以严格禁止在这些特定URL上进行预加载。
示例： 5, 12, 104

故障排除

图片未预加载

验证URL： 确保所有链接都是直接的图像路径且可公开访问。
检查方法： 如果使用“链接预加载”，请查看页面源代码（Ctrl+U）并搜索 <link rel="preload">。
CORS： 如果从外部CDN加载，请确保CDN发送正确的跨源资源共享（CORS）标头。
缓存： 保存设置后，清除所有WordPress、服务器和浏览器缓存。

性能与控制台错误

调试： 插件会将活动记录到浏览器控制台。

打开开发者工具（F12）。
筛选 [Image Preloading]。
查看成功/失败消息。

并发性： 如果浏览器出现卡顿，插件通常会通过并发限制来处理此问题。如果问题持续存在，请减少预加载的图像数量。

设置未保存

权限： 请确认您的用户帐户拥有管理员权限。
迁移： 如果您是从 v1.x 版本升级而来，请检查管理通知。插件会自动尝试迁移旧的设置格式。

️ 开发者指南

架构

该插件遵循简洁的面向对象结构，采用单例模式。

image-preloading/
├── image-preloading.php        # 主入口文件，类定义，单例模式
│   ├── Image_Preloading_Plugin # 核心类
│   │   ├── load_options()      # 设置与迁移逻辑
│   │   ├── register_settings() # WordPress 设置 API
│   │   └── should_load_scripts() # 条件显示的逻辑判断
├── assets/
│   └── js/
│       └── image-preloading.js # 基于 Promise 的 JS 预加载器
├── languages/                  # .pot 和 .po/.mo 文件
└── README.md

国际化

文本域： image-preloading
位置： languages/
所有后台和前端字符串均可完全翻译。

许可证与贡献

许可证： GNU 通用公共许可证 v2.0 或更高版本。