как поставить ajax-загрузчик во время загрузки изображений

Question

Как использовать загрузчик ajax - это мой вопрос: я новичок в ajax. У меня есть функция, которая работает, чтобы изменить изображение, когда пользователь нажимает на уменьшенное изображение, но изображение тяжелое, поэтому я хочу ajax до самой загрузки второго изображения. Я создал loader.gif теперь я просто хочу знать, как использовать это изображение в качестве загрузчика.

<script type="text/javascript"> 
    jQuery(function(){ 
     jQuery('#data').find('img').each(function(){ 
      jQuery(this).click(function(){ 
       var crd = jQuery(this).attr('title'); 
       jQuery('#bigimg').fadeOut('slow', function(){ 
        jQuery(this).find('#imnew').attr('src', 'images/' + crd +".jpg") 
       }).fadeIn() 
      }) 
     }) 
    }) 
</script> 

HTML

<div id="bigimg"> 
    <img src="images/bigImage1.jpg" id="imnew" alt="" /> 
</div> 

<div id="data"> 
    <div class="sub"> 
     <div class="1"> 
      <img src="images/thumb1.png" width="117" height="74" title="bigImage1" alt="" /> 
     </div> 
     <div class="2"> 
      <img src="images/thumb2.png" width="117" height="74" title="bigImage2" alt=""/> 
     </div> 
     <div class="3"> 
      <img src="images/thumb3.png" width="117" height="74" title="bigImage3" alt=""/> 
     </div> 
     <div class="4"> 
      <img src="images/thumb4.png" width="117" height="74" title="bigImage4" alt=""/> 
     </div> 
     <div class="5"> 
      <img src="images/thumb1.png" width="117" height="74" title="bigImage1" alt=""/> 
     </div> 
     <div class="6"> 
      <img src="images/thumb2.png" width="117" height="74" title="bigImage2" alt=""/> 
     </div> 
     <div class="7"> 
      <img src="images/thumb3.png" width="117" height="74" title="bigImage3" alt=""/> 
     </div> 
     <div class="8"> 
      <img src="images/thumb4.png" width="117" height="74" title="bigImage4" alt=""/> 
     </div> 
    </div> 
</div> 

Answer 1

Вы должны использовать jQuery.load, чтобы сказать вам, когда изображение по окончании загрузки.

Событие нагрузки отправляется элементу, когда он и все подэлементы имеют полностью загруженную . Это событие может быть отправлено любому элементу , связанному с URL-адресом: изображениями, сценариями, фреймами, фреймами и окном . http://api.jquery.com/load/

<script type="text/javascript"> 
    jQuery(function(){ 
     jQuery('#data').find('img').each(function(){ 
      jQuery(this).click(function(){ 
       var crd = jQuery(this).attr('title'); 
       // $('#loader').show(); 
       jQuery('#bigimg').fadeOut('slow', function(){ 
        jQuery(this).find('#imnew').attr('src', 'images/' + crd +".jpg") 
        .load(function() { 
            $('#loader').hide(); 
            $('#bigimg').fadeIn() 

        }); 
       }) 
      }) 
     }) 
    }) 
</script> 

Answer 2

Попробуйте это:

Дайте все миниатюры и тот же имя класса, а затем:

 $('.thumbnail').click(function(){ 
      var thumbNail = $(this); 
      var thumbPath = $(this).attr('src'); 
      var crd = $(this).attr('title'); 
      $(this).attr('src', 'images/loader.gif'); 
      $('#bigimg').fadeOut('slow', function(){ 
       $(this).load(function() { 
        $(this).fadeIn(); 
        $(thumbNail).attr('src', thumbPath); 
       }); 
       $(this).attr('src', crd); 
      }) 

     })