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，不会再次下载。您也可以在“网络”标签中证明这一点，该标签将被列出一次。

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

1 个答案: