這是ajax請求實際上做了什麼嗎？

Question

好吧，這聽起來像一個奇怪的問題，但我使用jQuery來做一個Ajax請求，所以我可以預加載一堆圖像，然後我想顯示所有的圖像，一旦一切都加載。有一個動畫加載器gif位於頁面上

我有下面的代碼，它使得ajax請求和加載的圖像像它應該。我從來沒有看到動畫的gif，我不知道如果它只是加載速度如此之快，或者某些東西不能正常工作，並且，一旦ajax成功，它仍然看起來像圖像需要加載，它們不會彈出，它看起來像仍在加載。

這就是我使用的：

var load_gallery = function(){ 
    var images = $.ajax({ 
     type : "POST", 
     url: "/index.php/main/get_images", 
     success: function(html){ 
      $("#gallery-images").html(html); 
      $("#image-loader-animation").addClass('hide'); 
      $('#cat-selector-all').addClass('link-selected');    
     } 
    }); 
} 

上面是否假設要等到ajax請求中的所有內容都加載並顯示在頁面上？如果沒有，有沒有一種方法可以讓這個Ajax請求等到所有東西完全加載，然後再顯示它並隱藏加載程序gif。

基本上是一個懶惰的加載程序。

感謝

編輯：我更新它使用.load，它似乎仍然有同樣的問題...不知道這是否是正確的：

var load_gallery = function(){ 
    $("#gallery-images").load('/index.php/main/get_images', function() { 
     $("#gallery-images").show(); 
     $("#image-loader-animation").addClass('hide'); 
     $('#cat-selector-all').addClass('link-selected'); 
    }); 

} 

編輯：這是請求......可能是因爲我的「M使用佔位符圖像現在？

<div class="site gallery-webdev"> 
    <div class="image"> 
     <img src="http://placekitten.com/1000/700" /> 
    </div> 
    <div class="description"> 
    asdf 
    </div> 
</div> 
<div class="site gallery-webdev"> 
    <div class="image"> 
     <img src="http://flickholdr.com/1000/700" /> 
    </div> 
    <div class="description"> 
    asdf 
    </div> 
</div> 
<div class="site gallery-seo"> 
    <div class="image"> 
     <img src="http://lorempixum.com/1000/700/0" /> 
    </div> 
    <div class="description"> 
    asdf 
    </div> 
</div> 
<div class="site gallery-fd"> 
    <div class="image"> 
     <img src="http://placedog.com/1000/700" /> 
    </div> 
    <div class="description"> 
    asdf 
    </div> 
</div> 
<div class="site"> 
    <div class="image"> 
     <img src="http://placekitten.com/1000/700" /> 
    </div> 
    <div class="description"> 
    asdf 
    </div> 
</div> 

Answer 1

如果你的AJAX請求是全成成功，函數將只被調用。

如果您正在使用本地計算機，請求速度很快。試試你的服務器上的腳本。

要解決您的問題：您能向我們顯示您的要求嗎？我會認爲你只加載部分，而不是圖像本身。

Answer 2

你ajax只是得到html並把它放在你想要的div。這不會加載圖像，因爲直到您將它們放在頁面上或創建一個JavaScript Image對象，服務器纔會請求它們。請嘗試改用plugin。我使用Image.onload併爲加載的圖像創建事件。我很久以前在一個項目中使用它進行延遲加載，並且它工作得很好。

至於微調，讓您在阿賈克斯/圖像請求之前創建並刪除它一旦一切競爭（無論是成功還是有錯誤）

Answer 3

您可以將.load事件附加到當div加載所有的內容時，它會得到回調。這應該爲你工作：

$("#gallery-images").load(function() { 
    $("#gallery-images").show(); 
}); 

請注意，我假設你想要的是不是AJAX請求完成（這就是發生在你進入成功的回調函數），而你想要的其他內容加載，然後讓你知道它何時加載（這不是AJAX）。