正在中止（HTML）圖像下載

Question

我有一個網頁上顯示的各種圖像集（比如每組50個圖像）。用戶可以從列表中選擇一個要顯示的集合，該列表通過jQuery ajax調用來加載，以刪除舊的img標籤並添加新的標籤。

我所看到的是，第一批陳舊圖像的所有請求仍然從服務器上被取消，從而延遲了新圖像的加載並且破壞了用戶體驗。所以我的問題是：是否有可能從瀏覽器中清除不再存在於DOM中的第一組img的請求？這是不是自動的？

下面是該過程的一個樣本jQuery的片段：

updateImages = function(imageSetId) { 
    // clear existing IMG set 
    $("#imagesDiv").empty(); 

    $.post(
     "/GetImagesInSet", 
     { imageSetId: imageSetId }, 
     function(data) { 
      // add in new IMG set 
      $("#imagesDiv").html(data); 
     }, 
     "html" 
    ); 
}; 

我的期望是，調用$（）空（）將阻止所有懸而未決的圖像，住在它予以除名。請求隊列。如果這是一個糟糕的設計，我會採取其他建議！

Answer 1

我發現了一個更好的選擇，即使用只下載可見圖像而不是所有圖像（即從視口中滾動出來的圖像）的延遲加載技術。 Bing.com的圖片搜索功能就是一個很好的例子。

這裏是一個jQuery插件，提供類似的功能：Lazy Load

看着它出現每當元素的邏輯位置比邏輯視圖的底部的更大的加載圖像的來源。不利的一面是，即使圖像實際上從未在視口內時，向下滾動時也會加載全部圖像。例如，如果您快速滾動到頁面的底部，則會加載底部框架視圖上方的一組圖像，即使它們並非真正需要。

Bing的實現更健壯，只在圖片真實可見時加載圖片。我將不得不測試這個插件來確保，但是源代碼很簡單，如果需要的話可能是「可修復的」。

Answer 2

值得一試：

$("img","#imagesDiv").attr("src",''); 
$("#imagesDiv").empty(); 

我不知道，如果你可以從隊列中刪除待處理的請求，但肯定會停止生成任何新的問題。