網站最後更新日期:2016年12月3日
歡迎大家來到暢想資源 AREFLY.COM!
讚好Facebook
追隨Twitter
加入QQ群
關注微博
關注微信公眾號
捐款
更多聯絡方式
X

給WordPress添加「加載中」動畫

今天教大家一個在你WordPress網站訪問有點慢時,可以提高用戶體驗的純CSS加載中」動畫

外掛(插件)版

一、添加CSS動畫代碼

1、這是最主要的一個步驟,用處時來顯示加載中的動畫

2、把下列代碼添加到你主題的「樣式表 (style.css)」文件內添加下列代碼就可以啦

二、添加顯示代碼

1、這一步的用處是把前面的CSS代碼顯示出來

2、在主題內的「頁首 (header.php)」文件的 <body> 後同樣添加下列代碼

三、添加jQuery漸隱效果

1、這個步驟是用於在網頁加載完成後是加載動畫漸漸消失,而不是一直不停地轉動

2、在「頁尾 (footer.php)」內的 </body> 前添加下列代碼就完咯

預覽

本頁左下角會永遠旋轉「加載中」動畫

wordpress-loading-preview

參考

WordPress页面加载时显示旋转的圆圈

總結

1、完成以上步驟後要清空快取才能顯示效果 :razz:

2、有問題可以回覆 :mrgreen:

覺得這篇文章有用麼?分享一下讓更多人知道吧!

爲繼續支持本站繼續寫出優質文章、歡迎捐款!

注:本站同時長期承接WordPress外掛及主題制作、伺服器環境配置等,如需詳情,請「聯系我們」!

© 版權聲明:「暢想資源」之所有文章及資源系采用「創用 CC 姓名標示-非商業性-相同方式分享 3.0 香港 授權條款」發布及共享,轉載時須以相同方式發布並注明「原文鏈接」!

本文固定鏈接:http://www.arefly.com/wordpress-loading/

本文章由「」於2013年07月18日發表於「WordPress」分類

你可以發表迴響,並在保留原文地址及作者的情況下引用到你的網站

轉載請注明:給WordPress添加「加載中」動畫 | 暢想資源

關鍵字:, ,

以下是廣告時間,廣告內容僅供參考!

廣告載入中...

給WordPress添加「加載中」動畫:目前有 45 條留言

訪客以 24:20 暫時領先博主

迴響載入中,請稍等...
  1. 13樓
    西贝博客 China Safari Mac OS

    哈哈,这个还挺好玩的,炫炫的。

    [回覆]
  2. 12樓
    小忆 China Mozilla Firefox Windows

    好文章 对我很有帮助

    [回覆]
    • 小忆 China Mozilla Firefox Windows

      随便问一下 进入页面的前几秒有 后面就消失了

      [回覆]
  3. 11樓
    四弦 China Google Chrome Windows

    博主同志,经查,你的插件不支持HHVM
    在我的服务器上你的插件导致我博客直接白掉。。。

    [回覆]
    • 其實並不只是我的外掛的問題,而是HHVM對PHP的支持始終不是很好,所以如果外掛無法使用,推薦使用純代碼方式自行添加,謝謝! :razz:

      [回覆]
      • 四弦 China Google Chrome Windows

        哎……HHVM快是快,就是支持不是很好……
        我原来的主题也不支持,只能弃主题保HHVM

        [回覆]
        • 其實速度真的並沒有這麼重要,整體網站的外觀、內容才是最重要的,而且現在PHP也不是很慢吧? :?:

          [回覆]
  4. 10樓
    我就有 China Google Chrome Windows

    很喜欢这个,很酷,我把他改了永久转! :mrgreen:

    [回覆]
    • 我個人覺得永久轉實在太奇怪了~老覺得像是沒加載完成 :grin: :grin:

      [回覆]
  5. 9樓
    e杯咖啡 Taiwan; Republic of China (ROC) 枫树极速浏览器 Windows

    我一直在想是要加在主題CSS好還是安裝外掛好?
    安裝外掛會導致頁面加載變慢?
    但是寫在主題的話,換了主題之後全部都要重弄,好糾結阿 :crazy:

    順便問問博主您側邊欄的"部落格統計"怎麼弄得?
    今天簽到啦!時間:上午10:51:11(使用Arefly評論框自動簽到)

    [回覆]
    • 如果你經常換主題的話,就應該使用外掛(現在外掛對速度的影響已經幾乎可以忽略不計了) :razz: 而如果你是打算一直使用同一個主題,還是就添加代碼至主題內較好 :mrgreen: :mrgreen:
      本站右側的部落格統計是使用外掛「Site Analytics Widget」(還是我自己做的 :grin: )達成的~~ :razz: :razz:

      [回覆]
  6. 8樓
    ysam China Mozilla Firefox Windows

    mark
    找时间折腾~

    [回覆]
  7. 7樓
    Carter Japan Google Chrome Windows

    添加了隐藏代码,还是不生效(已经刷新了N次了 :cry:

    [回覆]
    • 確定你的頁面加入了jQuery麼?這段代碼一定需要jQuery才能工作的~

      [回覆]
      • Carter Japan Google Chrome Windows

        怎么弄啊!我不太会弄,求教

        [回覆]
        • 將下方代碼添加到「header.php」中,然後點擊 更新檔案 就行啦! :razz:

          [回覆]
      • Carter Japan Google Chrome Windows

        还有,你显示我的这个系统是错的耶!我是Windows 8.1

        [回覆]
        • 呃。。是因為這個插件還暫時不支持Windows 8.1。。。 :oops: :oops:

          [回覆]
        • 現在支持Windows 8.1啦~~ :laugh: :laugh: :laugh:

          [回覆]
  8. 6樓
    百赖小生 China 搜狗浏览器 Windows

    这个不错的说。去试试了,谢谢博主写的这么吸纳关系。。 :mrgreen:

    [回覆]
  9. 它不消失啊怎么办?

    [回覆]
    • 可能是你的SCRIPT代碼沒有加對位置,你再去檢查一遍看看 :razz:

      [回覆]
      • 可是你说不用加SCRIPT会立马消失,加了只是缓慢消失呀。。。

        [回覆]
        • 額。。。說錯了。是一定要加,不加就不會消失。。。 :oops:

          [回覆]
      • 你的这段消失代码可能有问题,我自己写了个解决问题了,望替换

        [回覆]
        • 我的代碼應該沒問題,我自己就用的是我寫的那個代碼啊。。。

          [回覆]
      • scrip t没显示出来,被博主屏蔽了

        [回覆]
  10. 4樓
    小刀 China Google Chrome Windows

    添加渐隐代码也不消失是怎么回事

    [回覆]
    • 有時候刷新可能不會出現漸隱,但大部份時候還是會的,你多刷新幾次試試看呢? :razz:

      [回覆]
  11. 3樓
    可可豆 China Google Chrome Windows

    看过很多回但从不知道这个是正在载入中的意思~~

    [回覆]
  12. 2樓
    Lan Tian Reserved Google Chrome Mac OS

    还有你这个国家怎么显示不出来,我什么事都没干啊

    [回覆]
    • 現在可以了,前面獲取IP的方式出錯了。。。

      [回覆]
  13. 沙發
    Lan Tian Reserved Google Chrome Mac OS

    这是从小蒋博客弄来的吧,也不写转载

    [回覆]
    • 呃,我這個是從「經驗公式」那看到的,在「參考」那 :saynothing:

      [回覆]
    • 小蒋也不是原作者的啦。。。 :mrgreen:

      [回覆]
      • 對呀,這種網上到處都有,根本找不到誰是原作者 :idea:
        PS:不知道為什麼這條評論都要審核 :?:

        [回覆]
廣告載入中...

發表迴響



微笑 調皮 偷笑 可愛 大笑 壞笑 詭計 贊 疑問 HI~ 愛 抱歉 對不起 頭暈 驚訝 帥 努力 勞累 瘋狂 難過 大哭 差 豬 邪惡 無言 憤怒 流汗 擦汗


快捷鍵:Ctrl+Enter