javascript – 优先处理图像上的XHR请求？

2019年7月28日 197次阅读

我正在做一些基本的ajax请求来更改页面,例如：

$(document.body).on('click', ".paging a", function (e) {
    $.ajax({
        type: "GET",
        url: $this.attr('href'),
        success: function (data) {
            $("#main-content").html(data);
        }
    });
    e.preventDefault();
    return true;
});

ajax请求调用的URL返回HTML,有时此HTML包含30-40< img>图片.

我遇到的问题是,如果你快速连续点击两个页面,那么浏览器会等到它加载了前一个ajax请求的HTML中的所有图像,直到它进行下一个XHR调用为止.

有没有办法在图像之前优先处理XHR请求？基本上,如果单击另一个页面,我希望所有当前请求都停止,并且XHR请求立即执行.据我所知,这是因为浏览器限制它将对一个域进行多少异步请求(即6个用于chrome),如果我将图像更改为使用子域,则可能会修复它,但我试图找到一种方法来做到这一点,而不必诉诸子域.

最佳答案 当用户点击新页面时,您可以

>将“#main-content”元素的html存储在变量中
>清空“#main-content”中标签的所有src属性
>提出您的XHR请求
>重置“#main-content”的设置

这样,img http连接被中止,XHR请求被触发,最后你的图像请求从它们离开的地方继续. (这可能会因图像的缓存设置而异)

$('#goto-page-2').click(function (e) {
    var mainContentHTML = $("#main-content").html();
    $("#main-content").find('img').attr('src', ''); //clear images
    $.ajax({
        type: "GET",
        url: $this.attr('href'),
        success: function (data) {

        }
    });
    $("#main-content").html(mainContentHTML); // reset images
    e.preventDefault();
    return true;
});

参考

How to cancel an image from loading

点赞