如何在圖像加載時自動加載ajax加載程序

如何使用ajax加載程序是我的問題，我對ajax很陌生。我有一個功能，它可以改變圖像，當用戶點擊縮略圖圖像，但圖像很重，所以我想ajax，直到第二個圖像加載自己。我已經創建了loader.gif現在我只想知道如何使用這個圖像作爲加載器。如何在圖像加載時自動加載ajax加載程序

<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>

來源

2012-05-26 Carlos

您需要使用jQuery.load告訴你當圖像加載完畢。

加載事件發送到一個元素，當它和所有的子元素已完全加載。此事件可以發送到與URL相關聯的任何元素：圖像，腳本，框架，iframe和窗口對象。 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>

來源

2012-05-26 12:09:50 Benno

試試這個：

給你所有的縮略圖相同的類名，然後輸入：

 $('.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); 
      }) 

     })

來源

2012-05-26 12:10:39 user888734

如何在圖像加載時自動加載ajax加載程序

回答

相關問題