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

我用

Javascript

编写了以下代码：

函数newImage（名称）{
img=新图像（）；
img.onload=函数（）{
加载++；
控制台日志（“加载：+Math.round（加载/6*100）+%complete”）；
};
img.src=“./assets/”+名称；
返回img；
}
var img1=新图像（“img1”）；
var img2=新图像（“img2”）；
var img3=新图像（“img3”）；

---

我想知道在

img

变量中开始加载的图像返回到

img1

变量时是否保持加载状态。与中一样，它不会重新运行onload功能。

答案是图像不会再次下载。 这里有一把小提琴，你可以用它来看看：

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

---

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

是的，它将返回img，并将保持在

img1

变量中。我不是问它是否保持在img1变量中，我是问它是否必须再次加载，因此重新运行onload函数并再次从/assets/img1获取img。我会编辑这篇文章来澄清

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);