如何使显示与QUOT; AJAX Loading.gif＆QUOT;在图片库部分？ （jQuery的） [英] How to make display "AJAX Loading.gif" at image gallery section? (jQuery)

问题描述

我需要一些帮助，我想如何让显示器AJAX loading.gif是gif动画的图像内容。

I need a little help, i'm trying how to make display "AJAX loading.gif" is an animated gif at image content.

当你点击缩略图，图像需要加载，但它并不显示gif动画，我不知道如何...

When you click a thumbnail, the image takes loading but it doesn't show animated gif, i'm wondering how...

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是 ＆LT; D​​IV CLASS =ajaxgif＆GT;＆LT; / DIV＆GT; 但implented尚未

The div of AJAX gif is <div class="ajaxgif"></div> but is not implented yet.

推荐答案

您可以试试这个，第一个隐藏分区上的页面加载

You could try this, first hide your div on page load

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

请注意，您也可以把动画GIF的股利，我把装载的简便性。

Note that you can also put the animating gif in the div, I put in loading for simplicity.

有关你的javascript：

For your 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(); 
   });
});

这篇关于如何使显示与QUOT; AJAX Loading.gif＆QUOT;在图片库部分？ （jQuery的）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！