jQuery 页面加载时显示“加载图像”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9753501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show "Loading image" while page is loading
提问by Fredrik
I'm far from good at jQuery, to start with. I have read these two questions that deal with the subject:
首先，我远不擅长 jQuery。我已经阅读了有关该主题的两个问题：
- With jQuery, how can I implement a "page loading" animation?
- How can I create a "Please Wait, Loading..." animation using jQuery?
But I wonder how I can manage to show a "Loading text/image" when I press a link which is internal on my site? I have a link running a curl fetching function in PHP which take a while to be run.
但是我想知道当我按下我网站上的内部链接时，如何设法显示“正在加载文本/图像”？我有一个在 PHP 中运行 curl 获取函数的链接，它需要一段时间才能运行。
The above example (links) deals with the subject if you have a Ajax function to it. Not just a link, which I wan't.
如果您有 Ajax 函数，则上面的示例（链接）处理该主题。不只是一个链接，我不想。
How am I able to accomplish this?
我怎样才能做到这一点？
回答by Shyju
HTML
HTML
<a href="someotherpage.php" >Your Link</a>
Script
脚本
$(function(){
$("a").click(function(){
$(this).after("<img src='loading_image.gif' alt='loading' />").fadeIn();
});
});
This code will add a loading image after each link when user clicks on that.
当用户点击每个链接时，此代码将在每个链接后添加一个加载图像。
Working example : http://jsfiddle.net/YjWWX/3/
工作示例：http: //jsfiddle.net/YjWWX/3/
You can get some loading images from http://www.ajaxload.info
你可以从http://www.ajaxload.info获取一些加载图片
回答by Nilesh Umaretiya
CSS:
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:
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：
<!-- HTML -->
<div id="spinner"> </div>
回答by Ross
you will need to attach a click event using .on() function in Jquery.
您将需要使用 Jquery 中的 .on() 函数附加点击事件。
<a href='#' div='mylink'>
<div id='loading' style=display:none'>loading...</div>
<script type="text/javascript">
$('#mylink').on('click',$('#loading).show());
</script>
Then when you're done loading, you'll want to issue:
然后当你完成加载时，你会想要发出：
$('#loading').hide();
回答by kannan
$(window).load(function() { $(".loader").fadeOut("slow"); })
$(window).load(function() { $(".loader").fadeOut("slow"); })
css:
css：
.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249); }
.loader { 位置：固定；左：0px；顶部：0px；宽度：100%；高度：100%；z-索引：9999；背景： url('images/page-loader.gif') 50% 50% 无重复 rgb(249,249,249); }
html: Note declare div class= 'loader'
html: 注意声明 div class='loader'
回答by Sandip
step 1 => Declare the div in master/layout.cshtml like
步骤 1 => 在 master/layout.cshtml 中声明 div 就像
<div class="loader"></div>
step 2 => Add the css :
第 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}
step 3=> add the following javascript
步骤 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);
回答by black_code
Use fadeOut()method to the loader and keep it inside the $(window).load()method.
将fadeOut()方法用于加载程序并将其保存在$(window).load()方法中。
