如何让XHR请求优先级高于图片？解决Ajax分页加载延迟问题

这确实是浏览器资源调度里的常见坑——当你快速连续点击分页按钮时，浏览器默认会给图片这类资源分配较高的加载优先级，反而让新的Ajax请求被旧请求的图片加载阻塞，导致明显延迟。下面给你几个落地性强的解决方案：

1. 中断未完成的旧请求 #

每次触发新分页时，直接取消上一次还在pending的Ajax请求，这样旧请求附带的图片加载也会被终止，浏览器资源立刻转向新请求。

// 声明变量存储当前活跃的XHR请求
let activeXhr = null;

$(document.body).on('click', ".paging a", function (e) { 
    const $this = $(this);
    
    // 中断上一次未完成的请求
    if (activeXhr) {
        activeXhr.abort();
        activeXhr = null;
    }

    activeXhr = $.ajax({ 
        type: "GET", 
        url: $this.attr('href'), 
        success: function (data) { 
            $("#main-content").html(data); 
            // 请求完成后清空变量
            activeXhr = null;
        },
        error: function() {
            // 请求失败也清空变量
            activeXhr = null;
        }
    }); 
    e.preventDefault(); 
});

2. 延迟加载新请求中的图片 #

先把Ajax返回的HTML里的图片src替换成自定义属性（比如data-src），等页面渲染完成后再手动触发图片加载。这样图片不会抢占Ajax请求的资源，完全让XHR请求优先完成。

$(document.body).on('click', ".paging a", function (e) { 
    const $this = $(this);
    $.ajax({ 
        type: "GET", 
        url: $this.attr('href'), 
        success: function (data) { 
            // 临时容器处理返回的HTML
            const $tempContainer = $(data);
            
            // 替换所有img的src为data-src，移除原src
            $tempContainer.find('img').each(function() {
                const imgSrc = $(this).attr('src');
                $(this).attr('data-src', imgSrc).removeAttr('src');
            });
            
            // 渲染处理后的HTML
            $("#main-content").html($tempContainer);
            
            // 手动触发图片加载
            $("#main-content img").each(function() {
                $(this).attr('src', $(this).attr('data-src'));
            });
        } 
    }); 
    e.preventDefault(); 
});

3. 用Fetch API设置请求优先级 #

如果你的项目可以兼容现代浏览器，换成Fetch API可以直接设置请求优先级为high，让浏览器优先处理这个请求，压过图片的加载优先级。

let activeFetch = null;

$(document.body).on('click', ".paging a", function (e) { 
    const $this = $(this);
    
    if (activeFetch) {
        activeFetch.abort();
    }

    activeFetch = fetch($this.attr('href'), {
        method: 'GET',
        priority: 'high' // 标记为高优先级请求
    })
    .then(response => response.text())
    .then(data => {
        $("#main-content").html(data);
        activeFetch = null;
    })
    .catch(() => {
        activeFetch = null;
    });

    e.preventDefault(); 
});

注：这个特性支持Chrome 105+、Firefox 115+等现代浏览器，兼容性没问题的话，这是最简洁的方案。

4. 给图片标记低优先级 #

如果后端可以配合，或者你能控制返回的HTML结构，给图片加上priority="low"属性（Chrome支持），直接告诉浏览器降低这些图片的加载优先级：

<img src="your-image-url.jpg" priority="low" alt="描述文本">

或者在后端返回图片时，加上HTTP响应头：

Link: <your-image-url.jpg>; rel=preload; as=image; priority=low

总结 #

最推荐的是方案1+方案2的组合：既终止旧请求避免资源浪费，又延迟加载新图片保证XHR优先完成。如果浏览器兼容性允许，方案3的高优先级Fetch会更省心。

内容的提问来源于stack exchange，提问作者Zak123