如何中止（HTML）图片下载？

我要在网页上显示各种图像集（例如每组50张图像），用户可以从列表中选择一个要显示的集合，该集合通过jQuery ajax调用加载，还可以删除旧的img标签并添加新的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"
    );
};

我的期望是通过对$().empty()的调用来阻止将其中包含的所有待处理图像从请求队列中删除。请帮帮我，也可以提出其他建议！

Worth a try:

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

I'm not sure if you can remove pending requests from the queue, but that would certainly stop any new ones from being generated.

I've found a better alternative, which is to use a lazy loading technique that only downloads the visible images instead of all images (i.e. those scrolled out of the viewport). Bing.com's image search feature is a really nice example of this.

Here is a jQuery plugin that provides similar functionality: Lazy Load

Looking at the source it appears to load the image whenever the element's logical position is greater than that of the bottom of the logical view. The downside of this is that all images are loaded when scrolling down even when the image is never actually inside the viewport. For example, if you quickly scroll to the bottom of the page, the set of images above the bottom frame's view are loaded, even though they weren't really needed.

Bing's implementation is more robust and only loads images if they are truly visible. I'll have to test this plugin to make sure, but the source is simple enough and likely 'fixable' if the need arises.