页面载入提示美化版

之前发布过一篇《超链接的载入提示》，作用就是将当前你点击的超链接的 text 值换成设置的提示语来达到提示的效果，之前还觉得蛮好玩的，后来再久酷那发现了更好玩的提示，于是就让我的摸了过来，再加上阿邙那个载入后消失的动画的创意，于是这个美化版的就诞生了。效果大家可以点击这里查看，不过看完后记得返回来，这个效果只在当前页面打开才有效。

第一步

修改 header.php 打开你所用的主题文件中的 header.php ，并且在 body 后面加上：

<div id="loading">页面正在读取中...</div>

要注意的是，你的主题必须加载了 jQuery ，而且一定要在这段代码之前加载的才能有效果。

第二步

添加 CSS

#loading{
    color:#FFF;
    font-weight:bold;
    padding:5px 15px;
    background:#000 ;
    z-index:200;
    position:fixed !important;/*important*/
    position:absolute;/*IE */
    float:right;
    top:200px;
    left:45%;
    text-align:center;
    display:none;
    font-size:14px;
    opacity:0.7;
    filter:alpha(opacity=70);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

背景颜色、字体颜色、显示位置等属性大家自己修改吧。

第三步

添加 A 标签点击效果 页面内的所有 A 标签（不包括 新窗口打开、JS、锚记 的A标签）都具有这个点击效果。

$(document).ready(function() {
    $('#container a:not(a[target*=_blank] , a[href*=javascript] , a[href*=#])').click(function() {
        $('#loading').css({
            top: '200px',
            left: '45%'
        });
        $('#loading').show()
    })
})

第四步

提示消失 本段代码建议加载 footer.php 的 的前面，这个时候页面已经加载完毕。

$('#loading').hide()

一个简单又漂亮的提示就做完了。

THE-END

AI 评论

由 Google AI Gemini Pro 生成

你的日志很有趣，我之前也做过类似的尝试，但你的方法更加详细和美观。特别是将提示语与加载动画相结合，让等待的过程变得更加生动有趣。我迫不及待地想在自己的博客中尝试一下这种方法。谢谢你的分享！

添加评论

已有 51 条评论

  • 逸冰
    逸冰
    浙江
    回复

    这个提示很友好，效果也不错

    • 冰剑
      冰剑 MOD
      湖南
      回复

      我也蛮喜欢的，哈哈。

  • 海天无影
    海天无影
    江苏
    回复

    话说给你个意见 将那个动态消失的地方改到你的侧边的广告 或者热点栏目上
    吸引访客眼球啊 哈哈

    • 冰剑
      冰剑 MOD
      湖南
      回复

      好主意，不过页面有时候所在的位置都不同，不好判断。

  • MOPVHS
    MOPVHS
    浙江
    回复

    感觉像宫女倒完茶慢慢退下去的样子... :twisted:

  • MOPVHS
    MOPVHS
    浙江
    回复

    搞起全站Ajax就完美了～～～

    对了，冰剑，点“网盘”以后“页面正在读取中...”不会消失...

    另外...求网盘弹出效果代码...其他的林木木那里有～～～

    • 冰剑
      冰剑 MOD
      湖南
      回复

      很邪恶的描述，不过我喜欢，哇哈哈。。
      网盘那的是个问题，我想让他有这个效果，但是他不会消失，纠结。
      那网盘弹出的方法以前发过的：http://www.binjoo.net/2010/07/website-box-disk/，自己表达能力不好，不知道你能不能看懂。

    • N
      N
      江苏
      回复

      又是全站ajax，你挺迷恋ajax的嘛，可是我暂时还不会 :cry:

      • 冰剑
        冰剑 MOD
        湖南
        回复

        这可不是Ajax啊，仅仅只是个假象。。
        你再试试你名字提交评论，这下应该没问题了。

  • 平平
    平平
    江苏
    回复

    页面正在假装加载。。。。真戳心啊

    • 冰剑
      冰剑 MOD
      湖南
      回复

      不能欺骗访客嘛，本来就是在加载，假装正在异步加载而已。

  • 平平
    平平
    江苏
    回复

    丫的 还不睡觉 夜猫子啊

  • insect
    insect
    陕西
    回复

    这个提示很不错，很友好

  • 彼岸星辰
    彼岸星辰
    陕西
    回复

    给你来点个广告试试。。
    ps.终于找到你所说的QQ云输入了、、

    • 冰剑
      冰剑 MOD
      湖南
      回复

      谢谢啦，感动流涕。
      难道你才发现吗？那么明显的地方。

      • zchiy2k
        zchiy2k
        QUADRANET.COM
        回复

        嘿嘿，以人为本么~

        • 冰剑
          冰剑 MOD
          湖南
          回复

          丫的，那么晚了还不睡觉，难道和我同类？夜猫一族的？

          • zchiy2k
            zchiy2k
            QUADRANET.COM
            回复

            必须的！我在等待睡意来临的那一刻~

            • 冰剑
              冰剑 MOD
              湖南
              回复

              我还在等周公来找我，他差不多两个多小时以后才上班。

              • zchiy2k
                zchiy2k
                QUADRANET.COM

                那我不陪你了，睡去喽~
                :mrgreen:

              • 冰剑
                冰剑 MOD
                湖南

                哎，留下我孤苦伶仃寡人一个，去吧，朕准了。

  • 小武
    小武
    河北
    回复

    主题改的不错，个性十足，挺有爱。

    貌似js的小机关用的不少吧。

    • 冰剑
      冰剑 MOD
      湖南
      回复

      呵呵，谢谢夸奖，挺有爱是什么意思？
      用了很多JQ，不过JQ也是基于JS写的，也算是JS的小机关，呵呵。

  • 阿邙
    阿邙
    河南
    回复

    如果速度够快就不用提示 不过俺不想用国内的主机 :mrgreen:

    • 冰剑
      冰剑 MOD
      湖南
      回复

      俺是国外空间，早受不了国内的备案、空间限制等邪恶的事情了。

  • 海天无影
    海天无影
    江苏
    回复

    话说你的@回复 消失的效果也不错啊 看来这个消失jQ代码很不错~

    • 冰剑
      冰剑 MOD
      湖南
      回复

      其实那个是从别人那摸来的，我也不记得是哪摸的了，嘘，别让他看到。

  • Mr.Chou
    Mr.Chou
    广东
    回复

    固定背景··效果显示的不错啊·

    • 冰剑
      冰剑 MOD
      湖南
      回复

      我比较习惯固定的，不固定看着怎么都不爽。

  • zchiy2k
    zchiy2k
    黑龙江
    回复

    不过我习惯中键点击新标签打开看，然后老标签页就杯具了。。。

    • 冰剑
      冰剑 MOD
      湖南
      回复

      鄙视你这种钻牛角尖的，我认输，我再加个自动消失的代码。

  • FORECE
    FORECE
    加拿大
    回复

    我旅游回来了。。串门来了。

    • 冰剑
      冰剑 MOD
      湖南
      回复

      我说呢，按照你的习惯，一天不写个一两篇心里不舒服。
      原来这几天出去旅游去了，呵呵。

  • 小武
    小武
    河北
    回复

    “有爱”在百毒百科里有详细解释。对了，发现你的表情栏跟我博客有一样的毛病，就是有时候会闪个不停，估计是那个图片渐显的js搞的鬼。

    • 冰剑
      冰剑 MOD
      湖南
      回复

      了解了，确实很有爱，哈哈。
      我没发现有这个毛病，不会闪，是不是你浏览器的问题？

  • MVP
    MVP
    加拿大
    回复

    居然要关博客。估计那之前你服务器所在地先地震一次 LOL

    • 冰剑
      冰剑 MOD
      湖南
      回复

      震吧震吧，服务器在洛杉矶，要死一起死嘛。

  • MVP
    MVP
    加拿大
    回复

    呵呵~我开个玩笑呢~ 传说北美大陆西海岸会有8.7级地震。于是我慌的很~打算回国了~

    • 冰剑
      冰剑 MOD
      湖南
      回复

      汗，北美大陆西海岸，洛杉矶不就在那吗？看来要天天备份了，以防后患。

  • Ray
    Ray
    河北
    回复

    这个挺好玩的

  • hey33
    hey33
    河南
    回复

    hoho 支持下 hey33.com谢谢分享~

  • ucer
    ucer
    广东
    回复

    页面正在假装异岁加载中。。。哈哈。