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

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

答案是图像不会再次下载。这是您可以用来查看的小提琴：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，它有你的功能。当页面加载时，我们做的第一件事就是获取图像。然后，当您单击按钮时，我们会将您的图像注入页面。

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