您想向您的 WordPress 网站添加预加载动画吗？
预加载器是在后台显示页面加载进度的动画。这可以让访问者知道页面正在加载，这可以改善用户体验并降低跳出率。
在本文中，我们将逐步向您展示如何向 WordPress 添加预加载器。
什么是预加载动画，为什么将其添加到 WordPress？
如果页面需要很长时间才能加载，那么访问者可能会认为您的网站已损坏并放弃您的内容。阻止这种情况的一种方法是添加预加载器，它是显示页面加载进度的动画或状态。
在 WordPress 中添加新帖子时，您可以看到预加载器动画的实时示例。只需单击帖子编辑器中的“预览”按钮，WordPress 将在加载预览时显示预加载动画。
如果您的大部分内容都是文本，只有很少的图像和视频，那么您通常不需要向您的网站添加预加载器。相反，最好专注于提高网站的速度和性能，或者升级到更好的 WordPress 托管提供商。
另一方面，如果您的网站有大量图像或视频嵌入，那么添加预加载动画可能是有意义的。
话虽如此，让我们看看如何轻松地将预加载器添加到您的 WordPress 网站。只需使用下面的快速链接即可直接跳至您要使用的方法：
方法1：使用WP Smart Preloader在WordPress中添加预加载器（简单方法）
在 WordPress 中添加预加载器的最简单方法是使用 WP Smart Preloader。该插件有六个内置的预加载器动画可供您使用，或者您可以使用自定义 HTML 和 CSS 创建自己的动画。
您需要做的第一件事是安装并激活 WP Smart Preloader 插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后，转到设置 » WP 智能预加载器，然后打开“智能预加载器”下拉列表。这显示了您可以使用的所有不同动画。
该插件将显示您选择的动画的预览，因此您可以选择不同的预加载器以查看您最喜欢的。
默认情况下，动画将出现在您的WordPress 网站上，但如果您愿意，则可以仅在主页上使用它。只需选中“仅在主页上显示”框即可。
如果您想创建自己的CSS 动画，只需在“自定义 CSS”框中输入您的代码即可。
另一种选择是通过向“自定义动画”框中添加代码来创建自定义 HTML5 动画。
选择动画后，滚动到“显示加载程序的持续时间”部分。您可以在此处更改预加载器的播放时间。
默认选项为 1500 毫秒或 1.5 秒。这应该适用于大多数网站，但如果需要，您可以输入不同的数字。
默认情况下，动画需要 2500 毫秒或 2.5 秒才能完全淡出。要更改此设置，只需在“要淡出的加载程序”字段中输入更大或更小的数字即可。
如果您对预加载器的设置感到满意，只需单击“保存更改”按钮即可存储您的设置。
您现在可以访问您的WordPress 博客来查看预加载器的运行情况。
方法2：使用LoftLoader在WordPress中添加预加载器（更可定制）
将预加载器动画添加到 WordPress 网站的另一种方法是使用LoftLoader。该插件带有内置动画，可让您以多种不同的方式自定义预加载器。
您需要做的第一件事是安装并激活 LoftLoader 插件。有关更多详细信息，请参阅有关如何安装 WordPress 插件的初学者指南。
激活后，转到设置 » LoftLoader Lite以配置插件设置。LoftLoader Lite 与WordPress 主题定制器集成，因此此屏幕应该看起来很熟悉。
首先，点击“显示于”。在此屏幕上，您可以选择是要在整个 WordPress 博客上还是仅在主页上使用相同的预加载器。
例如，如果您的主页与网站的其他部分相比有大量图像和视频，那么仅在自定义主页上显示预加载器可能是有意义的。
做出决定后，单击“后退”箭头返回主设置页面。
接下来，单击“背景”选项。
在这里，您可以通过单击“选择颜色”框来更改背景颜色。您还可以更改背景的不透明度并选择新的结束动画，例如“淡入淡出”或“上下滑动”。
当您进行更改时，预览将会更新，因此您可以尝试不同的设置以查看最佳效果。如果您对背景设置感到满意，请单击“后退”箭头。
接下来，您可以通过单击“加载程序”选项来更改动画。
您可以通过单击“加载器动画”框中的不同缩略图来选择新动画。要更改预加载器的颜色，只需在“选择颜色”框中选择新颜色即可。
完成后，单击“后退”箭头。
接下来，单击“更多”菜单选项。在这里，您可以通过选择“最大加载时间”来更改动画播放的时间。
然后您可以输入预加载器应持续多长时间。
接下来，您可能希望为用户提供一种关闭动画的方法，特别是当您使用较长的最大加载时间时。要添加退出按钮，请单击“关闭按钮”，然后使用设置来配置您的按钮。
当您对按钮的设置感到满意时，只需单击“发布”按钮即可启用预加载器。
现在，您可以访问您的网站以查看新的预加载器的运行情况。
我们希望本文能帮助您了解如何向 WordPress 添加预加载动画。您可能还想查看我们有关如何使用 WordPress 创建登陆页面的指南，或者查看我们的专家精选的最佳拖放 WordPress 页面构建器。
