Question

我很擅长jQuery，开始时。我已经阅读了这两个涉及该主题的问题：

但我想知道当我按下我网站上的内部链接时，如何能够显示“加载文字/图片”？我有一个在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>

Answer 3

您需要在Jquery中使用.on（）函数附加click事件。

<a href='#' div='mylink'>
<div id='loading' style=display:none'>loading...</div>
<script type="text/javascript">
$('#mylink').on('click',$('#loading).show()); 
</script>

然后当你完成加载时，你会想要发出：

$('#loading').hide();

Answer 4

$（window）.load（function（）{$（＆＃34; .loader＆＃34;）。fadeOut（＆＃34; slow＆＃34;）;}）

的CSS：

.loader {position：fixed;左：0px;顶部：0px;宽度：100％;身高：100％; z-index：9999; background：url（＆＃39; images / page-loader.gif＆＃39;）50％50％no-repeat rgb（249,249,249）; }

HTML：注意声明div class =＆＃39; loader＆＃39;

Answer 5

步骤1 =＆gt;在master / layout.cshtml中声明div，如

 <div class="loader"></div>

步骤2 =＆gt;添加css：

.loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:url(../images/loader.gif) 50% 50% no-repeat #000;opacity:.75}

步骤3 =＆gt;添加以下javascript

$(window).on(function () {
    $(".loader").fadeOut("slow");
});

! function (a)
{   
      jQuery(window).bind("unload", function () { }), a(document).ready(function () {
          a(".loader").hide(), a("form").on("submit", function () {
              a("form").validate(), a("form").valid() ? (a(".loader").show(), a("form").valid() || a(".loader").hide()) : a(".loader").hide()
          }), a('a:not([href^="#"])').on("click", function () {
              "" != a(this).attr("href") && a(".loader").show(), a(this).is('[href*="Download"]') && a(".loader").hide()
          }), a("a:not([href])").click(function () {
              a(".loader").hide()
          }), a('a[href*="javascript:void(0)"]').click(function () {
              a(".loader").hide()
          }), a(".export").click(function () {
              setTimeout(function () {
                  a(".loader").fadeOut("fast")
              }, 1e3)
          })
      })
}(jQuery);

加载页面时显示“正在加载图像”

5 个答案: