javascript - 通过函数返回时图像是否保持加载状态

Question

我有以下用 Javascript 编写的代码:

function newImage(name) {
    img = new Image();
    img.onload = function () {
        loaded++;
        console.log("Loading: " + Math.round(loaded / 6 * 100) + "% complete");
    };
    img.src = "./assets/" + name;
    return img;
}
var img1 = newImage("img1");
var img2 = newImage("img2");
var img3 = newImage("img3");

我想知道在 img 变量中开始加载的图像在返回到 img1 变量时是否保持加载状态。同样，它不会重新运行 onload 函数。

Answer 1

答案是图像不会被再次下载。这是您可以用来查看的 fiddle : https://jsfiddle.net/uglynakedguy/eu4okzpx/7/

function newImage(name) {
    img = new Image();
    img.onload = function () {
        loaded++;
        console.log("Loading: " + Math.round(loaded / 6 * 100) + "% complete");
    };
    img.src = "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
    return img;
}

var imageLoaded = newImage("img1");

document.addEventListener('click', function (event) {
    if (!event.target.matches('.add')) return;
    document.body.appendChild(imageLoaded);
}, false);

如果你检查JS，它有你的功能。页面加载时我们做的第一件事是获取图像。然后，当您点击该按钮时，我们会将您的图片插入页面。

你会看到，如果图像已经加载，当我们注入(inject)它时，它呈现 super 快，它不会再次下载。您也可以证明在网络选项卡中，它将被列出一次。