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请求立即执行。据我所知，这种情况正在发生，因为浏览器限制了它对一个域所做的异步请求（即6个用于chrome），如果我将图像更改为使用子域，则可能会修复它，但我试图找到一种方法来做到这一点，而不必诉诸子域。

Answer 1

当用户点击新页面时，您可以

将“＃main-content”元素的html存储在变量
清空“＃main-content”

src属性

提出XHR请求
重置“#main-content”

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

java.lang.SecurityException: Not allowed to start activity Intent

参考

How to cancel an image from loading

Answer 2

在这种情况下，您正在更改页面内容，并且内容中包含图像，因此图像需要时间。因此，在这种情况下，如果您知道在这些页面上使用了哪个图像，则可以执行一项操作，然后在第一次加载页面时将所有图像加载到主页面上。您可以将这些图像放在隐藏的div中。当您的页面内容是包含这些图像的更改时，它将很快开始显示，因为它们已经在浏览器内存中。

Answer 3

使用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;
});

通过图像优先处理XHR请求？

3 个答案:

参考