网站最后更新日期:2018年8月29日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站 赞好Facebook 追随Twitter 关注微博
关注微信公众号
捐款 更多联络方式
×

給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:

觉得这篇文章有用吗?分享一下让更多人受益吧!

为继续支持本站继续写出优质文章,欢迎捐款!

© 版权声明:本文章采用“姓名标示-非商业性-相同方式分享 4.0 国际(CC BY-NC-SA 4.0)”于“”发布,转载时须以相同方式发布并注明“原文链接”!

本文固定链接:https://www.arefly.com/wordpress-loading/

本文章由“超级efly”于2013年07月18日发表于“WordPress”分类

你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站

转载请注明:給WordPress添加「加載中」動畫 | 畅想资源

关键字:, ,

給WordPress添加「加載中」動畫:目前有 45 条留言
访客以 25:20 大幅领先博主

评论载入中,请稍等……
  1. 14楼
    feiyaj China Google Chrome Windows

    感谢 一下就成功了

    [回复]
  2. 13楼
    西贝博客 China Safari Mac OS

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

    [回复]
  3. 12楼
    小忆 China Mozilla Firefox Windows

    好文章 对我很有帮助

    [回复]
    • 小忆 China Mozilla Firefox Windows

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

      [回复]
  4. 11楼
    四弦 China Google Chrome Windows

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

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

      [回复]
      • 四弦 China Google Chrome Windows

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

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

          [回复]
  5. 10楼
    我就有 China Google Chrome Windows

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

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

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

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

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

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

      [回复]
  7. 8楼
    ysam China Mozilla Firefox Windows

    mark
    找时间折腾~

    [回复]
  8. 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:

          [回复]
  9. 6楼
    百赖小生 China 搜狗浏览器 Windows

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

    [回复]
  10. 它不消失啊怎么办?

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

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

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

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

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

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

        [回复]
  11. 4楼
    小刀 China Google Chrome Windows

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

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

      [回复]
  12. 地板
    可可豆 China Google Chrome Windows

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

    [回复]
  13. 板凳
    Lan Tian Reserved Google Chrome Mac OS

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

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

      [回复]
  14. 沙发
    Lan Tian Reserved Google Chrome Mac OS

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

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

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

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

        [回复]

发表评论



微笑 调皮 偷笑 可爱 大笑 坏笑 诡计 赞 疑问 HI~ 爱 抱歉 对不起 头晕 惊讶 帅 努力 劳累 疯狂 难过 大哭 差 猪 邪恶 无言 愤怒 流汗 擦汗


快捷键:Ctrl+Enter