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"
    );
};

我的期望是调用$（）。empty（）会阻止其中的所有待处理图像从请求队列中删除。如果这是一个糟糕的设计，我会采取其他建议！

Answer 1

值得一试：

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

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

Answer 2

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

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

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

Bing的实现更加强大，只有在真正可见的情况下才会加载图片。我必须测试这个插件以确保，但源代码很简单，如果需要，可能“可修复”。

中止（HTML）图像下载

2 个答案: