首页添加页面载入中提示效果

发布于：电脑网络, 转来载去 3,511 次践踏

不知道为什么，一直对 JQuery 有恐惧和抵触心理，所以在我的网站基本上找不到很酷炫的效果。但是我深知 JQuery 的强大，尤其是木木这些天对 JQuery 的学习与日俱进，网站功能也越来越完善，看地我挺眼馋的。所以想从基本开始学习一下简单的 JQuery，至少不要让我太受打击。接下来要隆重推出本文的关键人物 Evlos，是他的一篇文章将我引入了 JQuery 的正轨，感激之至。

Evlos 介绍的这个 JQuery 相对来说比较简单，没有太打击我。效果可以看我的首页，点击任何一篇文章的标题都会显示“页面载入中……”的文字提示。

点击日志标题前

点击日志标题前

点击日志标题后

点击日志标题后

方法如下：

1、载入 Google 托管的 jQuery 库：

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js">
</script>

2、再加入一段点击后替换文字效果的 JS 代码：

<script type="text/javascript">
jQuery(document).ready(function($){
$('.title h2 a').click(function(){
    $(this).text('页面载入中……');
    });
});
</script>

其中 .title h2 a 就是需要替换文字所相应的 CSS 部分，如果需要将整站都改成页面载入中的提示效果，就把 .title h2 a 改成 a 就可以了，整站的链接被点击后就都会显示“页面载入中……”的提示效果。

另外，如果是在新窗口中打开链接，那在原窗口中停留的“页面载入中……”这些字还需要用一段 JS 代码将其复原。则代码如下：

<script type="text/javascript">
jQuery(document).ready(function($){
$('.title h2 a').click(function(){
    myloadoriginal = this.text;
    $(this).text('页面载入中……');
    var myload = this;
    setTimeout(function() { $(myload).text(myloadoriginal); }, 1800);       
});
});
</script>

从 JS 代码上，我凭借着生疏的编程基础，勉勉强强算是看懂了，就是加了个 Click 事件，反正效果也实现了，我对 JQuery 的阴影也消退了，不错不错，连我这种程度的水平也可以拿下 JQuery，童鞋们快试试吧。

再次感谢 Evlos 和他的文章：jQuery点击链接文字后替换文字

12月8日 Update:

上述方法百般测试后发现，仅在 Opera 浏览器下无效，现参考 Leeiio 的方法解决，替换代码如下：

<script type="text/javascript">
jQuery(document).ready(function($){
$('.title h2 a').click(function(){
    $(this).text('页面载入中……');
    window.location = $(this).attr('href');
    });
});
</script>