Question

是否有必要向DOM添加<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>.

我见过关于这种技术的混合信息。我正在使用jQuery，但问题也适用于vanilla-people。

我有兴趣让它在所有主流浏览器中运行。

Answer 1

而不是创建然后将元素附加到dom，为什么不在javascript中初始化新图像，然后将其源设置为图像URL。这个方法应该加载你的图像，而不是实际将它应用到一个元素或在dom上呈现它 - YET ...看一眼：

someImageArray[0] = new Image();
someImageArray[0].src = "http://placehold.it/700x200/";

从这里你可以使用javascript自由地使用该图像做你想做的事 - 直接在画布中渲染它或者用它创建一个元素。但你甚至可能不需要做任何事情。如果它已经在其他基于ajax的内容中被引用了。如果URL相同，浏览器应使用缓存版本来绘制dom。

希望这有助于here is a reference to a decent article about pre-loading提供更多选项......

Answer 2

我测试过的所有浏览器都可以加载图像，即使它们不在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);

Safari 13、11.1、10.1
Edge 18
Firefox 72、70、62
Chrome 78、71
Opera 64
IE11

（并不是详尽的清单。我只是尝试了各种版本和浏览器。）

还有一个新的image.decode() API，用于这种预加载图像的用例，并在实际解码图像以呈现图像时避免潜在的掉帧。 Edge尚不支持它（尽管可以使用基于铬的Edge）。

鉴于HTML Canvas可以使用图像而无需将它们放在DOM中，我认为它们已经可以加载图像。

Answer 3

如果您不将图像添加到DOM，则无法保证预装图像！如果你不添加它，JavaScript编译器可以在尝试加载之前积极地对Image进行垃圾收集，因为根本不使用该元素。

目前这在firefox中发生了！如果您不将它们添加到DOM，那么您的图像将不会被预加载！ - 所以请保持安全并添加它们。

Javascript预加载图片：是否添加到DOM？

3 个答案: