用jQuery显示加载指示器

我在

有一个带有图像滑块的

。 有12张图片，加载所有图片需要一些时间。 当图像加载时，我想显示加载的GIF图像。 我怎么能用jQuery做到这一点？ 我的代码是：

 
 
 
 
 
 Quddus Helal :: 01st - 2010
 
 
 
 
 Md Moniruzzaman :: 02nd - 2010
 
 
  

Answer 1

您可以将侦听器绑定到每个映像的load事件。 使用计数器或其他机制来跟踪每次调用侦听器时加载的图像数量。 然后在加载最后一个图像后隐藏加载指示器。 例如：

HTML

 Loading... 
     

jQuery的

 $(function() { var images = $('.large-image') , total = images.length , count = 0; $('#loading').show(); images.load(function() { count = count + 1; if (count >= total) { $('#loading').hide(); } }); }); 

你可以在jsFiddle上看到这个例子： http ： //jsfiddle.net/hallettj/ZefaM/

Answer 2

您可以使用jQuery load（）函数。 一旦图像加载，它将运行代码。 因此，如果你有一个显示的GIF，一旦图像加载，它将隐藏它。

使用Javascript

 $('img#id').load(function(){ $('#loadingGif').hide(); }); 

HTML

Answer 3

这就是你需要的： http ： //jqueryfordesigners.com/image-loading/

Answer 4

如果您通过AJAX加载所有图像，请使用以下方式

HTML

jQuery的

 $('#loadingDiv') .hide() // hide it initially .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) ;