如何在图库部分显示“AJAX Loading.gif”？ （jQuery的）

Question

我需要一些帮助，我正在尝试如何制作“AJAX loading.gif”是图像内容的动画gif。

单击缩略图时，图像需要加载，但不显示动画gif，我想知道如何...

http://bksn.mx/opequimar/renta_descripcion.html

JS：

$(".thumbnails a").click(function(){

  $("#bigpic").attr("src", $(this).attr("href"));

  $("#largeimage").attr("href", $(this).attr("rel"));
  $('#bigpic').fadeIn('slow');
  return false;
});

HTML：

图片内容：

<div id="novedades_imagepubli">

<a href="img/barco1.jpg" id="largeimage"><span></span><img src="img/barco1.jpg" id="bigpic" width="375" height="250"/></a>


</div>

缩略图：

<div class="thumbnails">
<a href="img/1.jpg" rel="img/1.jpg"><img src="img/thumbnails/thumbnail1.jpg" /></a>
<a href="img/2.jpg" rel="img/2.jpg"><img src="img/thumbnails/thumbnail2.jpg" /></a>
</div>

AJAX gif的div是 <div class="ajaxgif"></div>但尚未实施。

Answer 1

你可以试试这个，首先在页面加载时隐藏你的div

<div class="ajaxgif">Loading...</div>

请注意，你也可以将动画gif放在div中，为了简单起见我加载了。

对于您的javascript：

$(function(){   
   var gif = $('.ajaxgif'); 
   gif.hide();

   $(".thumbnails a").click(function(e){
     gif.show('slow'); 
     $("#bigpic").attr("src", $(this).attr("href"));
     $("#largeimage").attr("href", $(this).attr("rel"));
     $('#bigpic').fadeIn('slow', function(){ gif.hide('slow') }); 
     e.stopPropagation(); 
   });
});