将 XHR 请求优先于图像？

Question

我正在做一些基本的 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 请求。据我所知，发生这种情况是因为浏览器对一个域发出的异步请求数量有限制（例如 chrome 为 6），如果我将图像更改为使用子域，它可能会修复它，但我正在尝试找到一种方法来做到这一点，而不必求助于子域。

Answer 1

使用XMLHttpRequest您可以加载图像并中止。

var xhrAr = Array(); 
function abortXhr(){
    for(var key in xhrAr)
        xhrAr[key].abort();
    xhrAr = Array(); 
}
function startXhr(dataObj){
    var imgObj = dataObj.find('img');
    imgObj.each(function(){
        var thisObj = $(this);
        var src = $(this).attr('src');
        $(this).attr('src', ''); //prevent loading
        var xhr = new XMLHttpRequest();
        xhr.open("GET", src, true);
        xhr.responseType = "blob";
        xhr.onload = function(){
            var imageUrl = (window.URL || window.webkitURL).createObjectURL(this.response);//Creating blob ul
            thisObj.attr('src', imageUrl);
        }
        xhr.send();
        xhrAr.push(xhr);
    });
}
$(document.body).on('click', ".paging a", function (e) {
    abortXhr(); //abort
    $.ajax({
        type: "GET",
        url: $this.attr('href'),
        success: function (data) {
            var dataObj = $(data);
            startXhr(dataObj);//Start
            $("#main-content").append(dataObj);
        }
    });
    e.preventDefault();
    return true;
});