Javascript 使用 jQuery 显示加载指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5720468/
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 indicator with jQuery
提问by Imrul.H
I have a <div>with an image slider in an <li>. There are 12 images, and it takes some time to load all of them. While the images load, I want to show a loading GIF image. How can I do this with jQuery? My code is:
我有一个<div>带有图像滑块的<li>. 有12张图片，加载所有图片需要一些时间。在图像加载时，我想显示一个正在加载的 GIF 图像。我怎样才能用 jQuery 做到这一点？我的代码是：
<div id="banner_slider">
<ul id="portfolio">
<li>
<a href="#"><img src="gallery/2010/2010slider//01_quddus_helal.jpg" alt="Slider Image" border="0" /></a><br />
<p class="caption"> Quddus Helal :: 01st - 2010</p>
</li>
<li>
<a href="#"><img src="gallery/2010/2010slider//02_md_moniruzzaman.jpg" alt="Slider Image" border="0" /></a><br />
<p class="caption"> Md Moniruzzaman :: 02nd - 2010</p>
</li>
</ul>
</div>
回答by Jesse Hallett
You can bind a listener to the load event of each image. Use a counter or some other mechanism to keep track of how many images are loaded each time the listener is invoked. Then hide the loading indicator after the last image is loaded. For example:
您可以将侦听器绑定到每个图像的加载事件。使用计数器或其他一些机制来跟踪每次调用侦听器时加载了多少图像。然后在加载最后一个图像后隐藏加载指示器。例如：
HTML
HTML
<span id="loading" style="display:none">Loading...</span>
<div class="images">
<img class="large-image" src="http://astritademi.files.wordpress.com/2011/04/happy_panda.jpg" width="893" height="548" />
<img class="large-image" src="http://www.pandafix.com/pandafix/images/r3387761054.jpg" width="275" height="199" />
<img class="large-image" src="http://farm1.static.flickr.com/149/357563212_f8b89ac6d8.jpg" width="500" height="375" />
</div>
jQuery
jQuery
$(function() {
var images = $('.large-image')
, total = images.length
, count = 0;
$('#loading').show();
images.load(function() {
count = count + 1;
if (count >= total) {
$('#loading').hide();
}
});
});
You can see this example in action on jsFiddle: http://jsfiddle.net/hallettj/ZefaM/
你可以在 jsFiddle 上看到这个例子：http: //jsfiddle.net/hallettj/ZefaM/
回答by fin1te
You can use the jQuery load()function. It will run the code once the image has loaded. So if you have a gif shown, once the image has loaded, it will hide it.
您可以使用 jQuery load()函数。一旦图像加载，它将运行代码。所以如果你有一个 gif 显示，一旦图像加载，它就会隐藏它。
Javascript
Javascript
$('img#id').load(function(){
$('#loadingGif').hide();
});
HTML
HTML
<div id="loadingGif">
<img src="loading.gif" />
</div>
回答by diEcho
if u loading all images via AJAX then use below way
如果您通过 AJAX 加载所有图像，则使用以下方式
HTML
HTML
<div id="loadingDiv"><img src="loading.gif"></div>
jQuery
jQuery
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;
回答by Calum
This is what you need: http://jqueryfordesigners.com/image-loading/
这就是你所需要的：http: //jqueryfordesigners.com/image-loading/
