4

是否需要向 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，但这个问题也适用于普通人。

我有兴趣让它在所有主要浏览器中都能正常工作。

4

3 回答 3

2

与创建然后将元素附加到 dom 不同，为什么不在 javascript 中初始化一个新图像，然后将其源设置为您的图像 URL。此方法应该加载您的图像，而无需将其实际应用到元素或在 dom 上渲染它 - YET... 看一看：

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

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

希望这会有所帮助，这是对一篇关于预加载的体面文章的参考，其中包含更多选项...

于 2013-10-28T20:22:25.540 回答
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
  • 边缘 18
  • 火狐 72、70、62
  • 铬 78、71
  • 歌剧 64
  • IE11

（并不意味着是一个详尽的列表。我只是尝试了各种版本和浏览器。）

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

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

于 2019-11-13T17:49:52.937 回答
1

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

这目前发生在 Firefox 中！如果您不将它们添加到 DOM，您的图像将不会被预加载！- 所以为了安全起见并添加它们。

于 2015-08-07T10:05:37.650 回答