為您的 WordPress 網站添加加載動畫（10 種不同的選項）

每個人總是很匆忙，加載時間超過 2 或 3 秒的網站被認為“太慢了”。 值得慶幸的是，有一種方法可以暫時繞過這種恐慌並使用戶在網站上停留足夠長的時間以加載內容。 我說的是完美的催眠加載動畫。

在這篇文章中，我們將了解加載動畫究竟是什麼，它們的目的是什麼，以及如何將一個加載動畫添加到任何 WordPress 網站——包括你的 Divi 網站。

什麼是加載動畫？

加載動畫，也稱為預加載器，是一種引人注目的動畫，它在網站上顯示的時間足以加載所有元素。 一些加載動畫很短，不需要長時間吸引用戶的注意力。 但在某些情況下，如果網站非常大，加載動畫需要真正吸引用戶才能留下來。

如果您接觸過足夠長的時間，您就會知道加載動畫自 90 年代以來就一直在出現。 即使在互聯網時代的初期，我們也有加載動畫。 當然，在那時，它們的使用壽命可能比現在長得多。 此外，我們已經學會瞭如何讓用戶更享受它們，而不會讓它們感到無聊和導航。

熟悉加載動畫

最常見的加載動畫風格是旋轉圓圈。 不要與蘋果電腦的“死亡彩虹圈”相混淆。 旋轉圓加載動畫具有交錯的漸變運動。 第一個旋轉式預加載器有很多不同的版本，從花朵到圓形到雪花，甚至還有旋轉的迎陽。 如今，旋轉加載動畫更加動態且更美觀。

旋轉加載動畫僅在等待時間很短時才有效。 超過5秒已經太多了。 那是開發人員需要使用更具創意的預加載器的時候。 無論需要多長時間，有趣且有趣的加載動畫都會讓用戶留在網站上。

更好地加載動畫的技巧

您可以將一些內容添加到加載動畫中，使其比移動圖像更有趣。 這裡有一些提示，可以使它們更好、更有效。

• 包括百分比欄
• 顯示用戶還需要等待多少時間
• 解釋幕後發生的事情（使用幽默的道具）
• 使用有趣的動畫，不一定重複相同的動作

品牌加載動畫的好處

如果您有機會創建自己的加載動畫或使用帶有自定義選項的插件，請確保預加載器帶有品牌標識。 這可能就像使用品牌網站顏色實際使用公司插圖一樣簡單。 品牌加載動畫背後的想法是它看起來屬於該網站，而不僅僅是一個附加組件。 Awwwards 網站上的這一綜述可以激發您自己的創作。

如何為您的 WordPress 網站添加加載動畫

添加加載動畫比您想像的要容易。 關於如何將一個添加到 WordPress 網站，有多種選擇。 從易於使用的插件到向站點添加自定義代碼。 由於有很多不同的選擇，我將在此處列出它們，以便您環顧四周並找到最適合您的選擇。

使用插件添加加載動畫

插件是添加加載動畫的最簡單、最直接的方法。 如果您不喜歡弄亂代碼或沒有時間，這些特別有用。 這裡列出了一些用於加載動畫的最通用的插件。 其中一些是免費的，而另一些則是收費的。 在某些情況下，同一個插件有更簡單的免費版本和更強大的專業版。

放樣機

Loftloader 有免費版和專業版。 在免費版本中，您可以試用一些 proloader 並進行自定義以匹配站點和品牌。 專業版有更多選項和更精細的控制。

平板預加載器

Flat Preloader 是一個簡單的免費插件，帶有一組有限的彩色加載動畫。 如果您需要快速修復預加載器並且不需要自定義顏色或圖像，則此插件是完美的。

最佳預加載器

Best Preloader 是一款免費的單選項加載動畫插件，適合任何網站風格。 我附帶了一個帶有一些自定義控件的動畫。

頁面加載器

Page Loader 是一個高級加載動畫插件，具有許多自定義和品牌選項。 它是市場上最受歡迎的預加載器插件之一。

WP 智能預加載器

WP Smart Preloader 是一個免費的開源插件，具有完整的自定義選項。 動畫不是很精緻，但可以匹配任何風格的網站。 您可以輕鬆自定義顏色和設置。

添加沒有插件的加載動畫

如果您想避免使用插件，可以使用大量免費且隨時可用的加載動畫。 以及一些提供您需要添加的代碼片段的高級教程。

PixelBuddha 與多媒體：

Multimedia 的人發布了一個簡單的教程，其中包含來自 PixelBuddha 的兩套免費加載動畫以及在您的網站上設置它們所需的代碼。

代碼筆：

UX Planet 的這篇 Medium 文章，作者總結了很多不同風格的加載動畫。 有簡單的和更複雜的。 它們中的大多數是從 CodePen 嵌入的，您可以從小部件本身獲取 HTML 和 CSS 片段。 您需要將這些插入到用於加載動畫設置的完整代碼集中。

旋轉套件：

Tobias Ashli​​nk 有一個 SpinKit，裡面有一個很好的加載動畫集合，代碼可以通過 GitHub 獲得。 這些還需要添加到預安裝設置的完整代碼集中。

Loading.io：

Loading.io 是具有許多不同選項的加載動畫的集合。 有 CSS 預加載器、GIF 預加載器、按鈕等等。 瀏覽他們的網站以找到所有選項以及有關如何將它們添加到您的網站的說明。

像素變量：

這些傢伙是 Pixelvars 編寫了一個方便的教程，其中包含設置自己的加載動畫所需的所有代碼。 您甚至可以將他們的代碼與上面的 CodePen 或 GitHub 動畫一起使用。 對於某些人來說，此選項似乎更高級一些。 如果您是具有良好編碼知識的開發人員，請選擇此方法。

有這麼多選擇，你會選擇哪個？

向 WordPress 網站添加加載動畫很容易。 有這麼多不同的選項可供選擇，只需選擇一個即可。

在這篇文章中，我們向您展示了許多不同的方法來向您的網站添加加載動畫。 你更喜歡哪一種方法？ 自定義設計並添加代碼到子主題？ 一個可定制的插件？ 一個簡單的、沒有多餘裝飾的選項？ 請在評論中告訴我們，以便我們查看您自己的加載動畫。

精選圖片來自 muchomoros/shutterstock.com