中止 (HTML) 图像下载答案

【问题标题】：Aborting (HTML) Image Downloads中止 (HTML) 图像下载
【发布时间】：2010-10-27 20:15:43
【问题描述】：

我在网页上显示了多种图像集（例如每组 50 张图像）。用户可以从列表中选择要显示的集合，该列表通过 jQuery ajax 调用加载以删除旧的 img 标签并添加新标签。

我看到的是，对第一批陈旧图像的所有请求仍然从服务器中拉出，从而延迟了新图像的加载并终止了 UX。所以我的问题是：是否可以从浏览器中清除对 DOM 中不再存在的第一组 img 的请求？这不是自动的吗？

这是一个示例 jQuery sn-p 过程：

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() 会阻止所有存在于其中的待处理图像从请求队列中删除。如果这是一个糟糕的设计，我会采纳其他建议！

【问题讨论】：

标签： jquery html ajax image

【解决方案1】：

值得一试：

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

我不确定您是否可以从队列中删除待处理的请求，但这肯定会阻止任何新请求的生成。

【讨论】：

试一试，但仍然有相同的行为。谢谢回复！ +1

【解决方案2】：

我找到了更好的选择，即使用延迟加载技术，该技术仅下载可见图像而不是所有图像（即那些滚动出视口的图像）。 Bing.com 的图片搜索功能就是一个很好的例子。

这是一个提供类似功能的 jQuery 插件：Lazy Load

查看源代码时，只要元素的逻辑位置大于逻辑视图底部的位置，它就会加载图像。这样做的缺点是 all 图像在向下滚动时加载，即使图像实际上从未在视口内。例如，如果您快速滚动到页面底部，则会加载底部框架视图上方的一组图像，即使它们并不是真正需要的。

Bing 的实现更加健壮，并且仅在图像真正可见时才加载它们。我必须测试这个插件以确保，但源代码足够简单，如果需要，可能“可修复”。

【讨论】：