如何制作显示器“;AJAX Loading.gif”;在图片库部分?(jQuery）

How to make display "AJAX Loading.gif" at image gallery section? (jQuery)

本文关键字：图片库部 jQuery gif 显示器 何制作 AJAX Loading      更新时间：2023-09-26

我需要一些帮助，我正在尝试如何使显示"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是CCD_ 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(); 
   });
});
相关文章：