javascript - 如何让图片库部分显示 "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 中，为了简单起见，我放入了“loading”。

对于您的 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(); 
   });
});