在我的例子中，为onload事件添加一个回调函数是有用的:

function preloadImage(url, callback)
{
    var img=new Image();
    img.src=url;
    img.onload = callback;
}

然后包装它的情况下，一个url数组的图像被预加载回调对all是完成的: https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){
    var loadedCounter = 0;
  var toBeLoadedNumber = urls.length;
  urls.forEach(function(url){
    preloadImage(url, function(){
        loadedCounter++;
            console.log('Number of loaded images: ' + loadedCounter);
      if(loadedCounter == toBeLoadedNumber){
        allImagesLoadedCallback();
      }
    });
  });
  function preloadImage(url, anImageLoadedCallback){
      var img = new Image();
      img.onload = anImageLoadedCallback;
      img.src = url;
  }
}

// Let's call it:
preloadImages([
    '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
  '//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
    console.log('All images were loaded');
});

在我的例子中，为onload事件添加一个回调函数是有用的:

function preloadImage(url, callback)
{
    var img=new Image();
    img.src=url;
    img.onload = callback;
}

然后包装它的情况下，一个url数组的图像被预加载回调对all是完成的: https://jsfiddle.net/4r0Luoy7/

function preloadImages(urls, allImagesLoadedCallback){
    var loadedCounter = 0;
  var toBeLoadedNumber = urls.length;
  urls.forEach(function(url){
    preloadImage(url, function(){
        loadedCounter++;
            console.log('Number of loaded images: ' + loadedCounter);
      if(loadedCounter == toBeLoadedNumber){
        allImagesLoadedCallback();
      }
    });
  });
  function preloadImage(url, anImageLoadedCallback){
      var img = new Image();
      img.onload = anImageLoadedCallback;
      img.src = url;
  }
}

// Let's call it:
preloadImages([
    '//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
  '//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
    console.log('All images were loaded');
});

我建议你使用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()在旧的垃圾浏览器中有更好的支持。

浏览器最好使用头部的链接标签。

export function preloadImages (imageSources: string[]): void {
  imageSources
    .forEach(i => {
      const linkEl = document.createElement('link');
      linkEl.setAttribute('rel', 'preload');
      linkEl.setAttribute('href', i);
      linkEl.setAttribute('as', 'image');
      document.head.appendChild(linkEl);
    });
}

我可以确认，在这个问题的方法是足以触发图像下载和缓存(除非你已经禁止浏览器这样做通过你的响应头)，至少:

铬74 Safari 12 火狐66 边缘17

为了测试这一点，我做了一个小的网络应用程序，它有几个端点，每个端点都休眠10秒钟，然后提供一张小猫的照片。然后我添加了两个网页，其中一个包含<script>标记，其中每个小猫都是使用来自问题的preloadImage函数预加载的，另一个包含页面上使用<img>标记的所有小猫。

在上面所有的浏览器中，我发现如果我先访问预加载器页面，等待一段时间，然后转到带有<img>标记的页面，我的小猫会立即呈现。这表明预加载器在所有测试的浏览器中成功地将小猫加载到缓存中。

您可以在https://github.com/ExplodingCabbage/preloadImage-test上查看或试用我用于测试的应用程序。

特别要注意的是，即使循环图像的数量超过浏览器一次愿意发出的并行请求的数量，这种技术也可以在上述浏览器中工作，这与Robin的回答所建议的相反。图像预加载的速率当然会受到浏览器愿意发送多少并行请求的限制，但它最终会请求您调用preloadImage()的每个图像URL。

ECMAScript 2017兼容浏览器的解决方案

注意:如果你使用的是像Babel这样的编译器，这也可以工作。

'use strict';

function imageLoaded(src, alt = '') {
    return new Promise(function(resolve) {
        const image = document.createElement('img');

        image.setAttribute('alt', alt);
        image.setAttribute('src', src);

        image.addEventListener('load', function() {
            resolve(image);
        });
    });
}

async function runExample() {
    console.log("Fetching my cat's image...");

    const myCat = await imageLoaded('https://placekitten.com/500');

    console.log("My cat's image is ready! Now is the time to load my dog's image...");

    const myDog = await imageLoaded('https://placedog.net/500');

    console.log('Whoa! This is now the time to enable my galery.');

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

runExample();

您还可以等待所有图像加载。

async function runExample() {
    const [myCat, myDog] = [
        await imageLoaded('https://placekitten.com/500'),
        await imageLoaded('https://placedog.net/500')
    ];

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

或者使用Promise。所有这些都是并行加载的。

async function runExample() {
    const [myCat, myDog] = await Promise.all([
        imageLoaded('https://placekitten.com/500'),
        imageLoaded('https://placedog.net/500')
    ]);

    document.body.appendChild(myCat);
    document.body.appendChild(myDog);
}

更多关于承诺。

更多关于“异步”函数。

更多关于解构赋值的内容。

更多关于ECMAScript 2015。

更多关于ECMAScript 2017。