Как сделать отображение "AJAX Loading.gif" в разделе галереи изображений?(JQuery) - PullRequest
Новая
       20

Как сделать отображение "AJAX Loading.gif" в разделе галереи изображений?(JQuery)

1 голос
/ 12 октября 2011

Мне нужна небольшая помощь, я пытаюсь сделать так, чтобы «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>

Div AJAX GIF <div class="ajaxgif"></div> но еще не заполнено.

1 Ответ

0 голосов
/ 12 октября 2011

Вы можете попробовать это, сначала спрячьте свой 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(); 
   });
});
...