正在中止（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(); 

我不知道，如果你可以从队列中删除待处理的请求，但肯定会停止生成任何新的问题。