javascript - 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请求调用返回HTML的URL，有时这个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;
});