页面加载时显示“加载图片”

我很不擅长jQuery，首先。我已阅读，处理这个问题两个问题：页面加载时显示“加载图片”

但我不知道我怎么能管理，以显示“加载文本/图片”当我按一个链接这是我的网站内部？我有一个链接在PHP中运行curl抓取函数，需要一段时间才能运行。

上面的例子（链接）处理主题，如果你有一个Ajax功能。不只是一个链接，我不想。

我该怎么做到这一点？

来源

2012-03-17 Fredrik

除非您修改站点以使用AJAX加载内容，否则您将无法完成此操作。 – Jon 2012-03-17 20:36:51

将链接更改为“Ajax函数”并不困难。 – Ryan 2012-03-17 20:36:51

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

来源

2012-03-17 20:38:45 Shyju

这似乎很整洁，但有些如何无法让它工作。我有以下jquery版本：jquery-1.7.1.min.js并且已经实现了代码。我的链接看起来像这样Run。仍然无法让它工作。任何想法为什么？ – Fredrik 2012-03-17 20:56:41

@Fredrik：它应该工作。我想你在页面上有一些其他的脚本错误。使用萤火虫控制台标签查看你正在收到什么错误？尝试一个简单的页面，然后逐步添加elemtns。那么你可以找出问题出在哪里 – Shyju 2012-03-17 21:31:12

一些谷歌搜索后，我得到了正确的代码。在你的例子中，$（document）.ready不存在，这就是为什么它不适合我。我使用的正确代码是：'$（document）.ready（function（）{（“a”）。click（function（）{（this）.after（“ loading ”）） .fadeIn（）; 将返回false; //注释掉此为链接的工作 }）; }）;' – Fredrik 2012-03-18 21:28:45

您需要在Jquery中使用.on（）函数附加一个单击事件。

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

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

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

来源

2012-03-17 20:36:42 Ross

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]

来源

2013-08-12 12:52:28

使用<>代替[] – 2013-08-12 13:00:22

$（window）.load（function（）{$（“。loader”）。fadeOut（“slow”）; }）

css：

.loader {position：fixed; left：0px; top：0px;宽度：100％;身高：100％; z-index：9999;背景：url（'images/page-loader.gif'）50％50％no-repeat rgb（249,249,249）; }

HTML：注声明类的div = '装载机'

来源

2014-05-29 10:09:52 kannan

步骤1 =>声明在主/布局在div。CSHTML像

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

步骤2 =>添加的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 =>添加以下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);

来源

2016-10-26 09:57:22 Sandip

代码将显示加载程序时页面laoding，点击在锚标记上，如果你在commin js文件中添加这个代码，请提交button.best – Sandip 2016-10-26 10:04:03

使用方法，加载程序和保持它内部的$(window).load()方法。

来源

2018-02-24 12:05:28

页面加载时显示“加载图片”

回答

相关问题