Question

我想在显示这个新页面之前预加载由 AJAX 方法调用的页面的所有图像。

到目前为止，我使用解析器来获取下一页的 DOM。
对于下一页的每张图片，我都会创建一个 javascript new Image 元素。
接下来，每当我的解析器 DOM 的图像完全加载时，我都会调用 .onload() 方法来获取一个事件。
加载完所有图像后，我将使用解析器中的 DOM 替换当前的 DOM。

不幸的是，我注意到当我的 DOM 更新时，所有图像都会再次加载，尽管我进行了预加载过程。看起来浏览器不明白他已经加载了这些图像。

有人看到我错过了什么吗？非常感谢

这是我预加载图像的方法：

let parser = new DOMParser();
let doc = parser.parseFromString(data, "text/html");
       
if(doc.querySelectorAll('.preload').length !== 0){
    this.len = doc.querySelectorAll('.preload').length
    doc.querySelectorAll('.preload').forEach(x => {

        let limg = new Image();
        limg.src = x.getAttribute('src');

        limg.onload = () => {
            this.counter++;
            this.oneImageIsLoaded();
        }
    });
}

AJAX 和预加载图像问题

0 个答案: