Javascript 预加载图像:添加到 DOM,还是不添加?

Cha*_*kal 5 html javascript jquery

是否需要向 DOM 添加 an<img>才能预加载它?

$(function whenDOMIsHappy(){

  var $img = $('<img />')
    .load(loadHandler)
    .error(errorHandler)
    .attr({src:"squatchordle-squashgarden.jpg"});

  $img.appendTo('body .preloads'); // is this at all necessary?

});
// assuming <div class="preloads" style="display:none;"></div> exists in <body>.
Run Code Online (Sandbox Code Playgroud)

我看到过关于这项技术的混合信息。我正在使用 jQuery,但这个问题也适用于普通人。

我有兴趣在所有主要浏览器中保持此功能。

Zac*_*chB 3

我测试过的所有浏览器都会加载图像,即使它们不在 DOM 中。您可以使用https://jsfiddle.net/84tu2s9p/进行测试。

const img = new Image();
img.src = "https://picsum.photos/200/300";
img.onload = () => console.log("loaded");
img.onerror = err => console.error(err);
Run Code Online (Sandbox Code Playgroud)
  • Safari 13、11.1、10.1
  • 边缘 18
  • 火狐 72、70、62
  • 铬 78、71
  • 歌剧 64
  • IE11

(并不是详尽的列表。我只是尝试了各种版本和浏览器。)

还有一个新的image.decode()API 专门用于预加载图像的用例,并避免在实际解码图像以渲染图像时潜在的丢帧。Edge 尚不支持(但基于 Chromium 的 Edge 会支持)。

鉴于 HTML Canvas 可以在不存在 DOM 的情况下使用图像,我认为它们必须加载图像。