我建议你使用try/catch来防止一些可能的问题:

OOP:

    var preloadImage = function (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

标准:

    function preloadImage (url) {
        try {
            var _img = new Image();
            _img.src = url;
        } catch (e) { }
    }

另外，虽然我喜欢DOM，但老式的愚蠢浏览器可能会在你使用DOM时遇到问题，所以恕我直言，与freedev的贡献相反，完全避免使用DOM。Image()在旧的垃圾浏览器中有更好的支持。

是的。这应该可以在所有主流浏览器上运行。

截至2020年的工作解决方案

这篇文章中的大多数答案不再有效-(至少在Firefox上)

以下是我的解决方案:

var cache = document.createElement("CACHE");
cache.style = "position:absolute;z-index:-1000;opacity:0;";
document.body.appendChild(cache);
function preloadImage(url) {
    var img = new Image();
    img.src = url;
    img.style = "position:absolute";
    cache.appendChild(img);
}

用法:

preloadImage("example.com/yourimage.png");

显然<cache>不是一个“已定义”的元素，所以如果你愿意，你可以使用<div>。

在你的CSS中使用它，而不是应用style属性:

cache {
    position: absolute;
    z-index: -1000;
    opacity: 0;
}

cache image {
    position: absolute;
}

如果你测试过这个，请留下评论。

注:

不应用display: none;缓存-这将不会加载 的形象。 不要调整图像元素的大小，因为这也会影响 加载图像的质量，当你来使用它。 设置位置:绝对于图像是必要的，因为图像元素最终会在视口之外——导致它们无法加载，并影响性能。

更新

虽然上面的解决方案是有效的，但这里有一个小更新，我做了一个很好的结构:

(这现在也接受多个图像在一个函数)

var cache = document.createElement("CACHE");
document.body.appendChild(cache);
function preloadImage() {
    for (var i=0; i<arguments.length; i++) {
        var img = new Image();
        img.src = arguments[i];
        var parent = arguments[i].split("/")[1]; // Set to index of folder name
        if ($(`cache #${parent}`).length == 0) {
            var ele = document.createElement("DIV");
            ele.id = parent;
            cache.appendChild(ele);
        }
        $(`cache #${parent}`)[0].appendChild(img);
        console.log(parent);
    }
}

preloadImage(
    "assets/office/58.png",
    "assets/leftbutton/124.png",
    "assets/leftbutton/125.png",
    "assets/leftbutton/130.png",
    "assets/leftbutton/122.png",
    "assets/leftbutton/124.png"
);

预览:

注:

尽量不要同时预加载太多的图像(这可能会导致主要的性能问题)-我通过隐藏图像来解决这个问题，我知道在某些事件中不可见。当然，当我需要的时候，再给他们看一遍。

这种方法稍微复杂一些。在这里，你将所有预加载的图像存储在一个容器中，可能是一个div。然后你可以显示图像或在DOM中移动到正确的位置。

function preloadImg(containerId, imgUrl, imageId) {
    var i = document.createElement('img'); // or new Image()
    i.id = imageId;
    i.onload = function() {
         var container = document.getElementById(containerId);
         container.appendChild(this);
    };
    i.src = imgUrl;
}

在这里试试，我也添加了一些评论

以下是我的方法:

var preloadImages = function (srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image;
        img.onload = function () {
            --remaining;
            if (remaining <= 0) {
                callback();
            }
        };
        img.src = srcs[i];
        imgs.push(img);
    }
};

您可以将此代码移动到index.html，以便从任何url预加载图像

<link rel="preload" href="https://via.placeholder.com/160" as="image">