加载页面时显示"正在加载图像"

Question

我很擅长jQuery,从开始.我读过这两个涉及这个问题的问题:

• 使用jQuery,我如何实现"页面加载"动画？
• 如何使用jQuery创建"Please Wait,Loading ..."动画？

但我想知道当我按下我网站上的内部链接时,如何能够显示"正在加载文本/图像"？我有一个在PHP中运行curl抓取功能的链接,需要一段时间才能运行.

如果你有一个Ajax函数,上面的例子(链接)处理主题.不只是一个链接,我不想.

我怎么能做到这一点？

Answer 1

HTML

<a  href="someotherpage.php" >Your Link</a>

脚本

$(function(){

  $("a").click(function(){
    $(this).after("<img src='loading_image.gif' alt='loading' />").fadeIn();  
  });

});

当用户点击该链接时,此代码将在每个链接后添加加载图像.

工作示例:http://jsfiddle.net/YjWWX/3/

您可以从http://www.ajaxload.info获取一些加载图像

Answer 2

CSS:

#spinner
{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(Images/Loading.gif) 50% 50% no-repeat #ede9df;
}

JS:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript">
    $(window).load(function() { 
        $("#spinner").fadeOut("slow"); 
    });
</script>

HTML:

<!-- HTML -->
<div id="spinner">  </div>