网站最后更新日期:2018年8月29日
欢迎大家来到畅想资源 AREFLY.COM! 个人网站 更多联络方式
×

给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/zh-cn/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