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

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

javascript jquery html

Javascript预加载图像：是否添加到DOM？,javascript,jquery,html,Javascript,Jquery,Html,是否需要添加中存在的。关于这项技术，我看到了各种各样的信息。我正在使用jQuery，但这个问题也适用于普通人我有兴趣在所有主流浏览器中保持这种功能与创建元素然后向dom追加元素不同，为什么不在javascript中初始化一个新图像，然后将其源设置为图像URL。此方法应该加载图像，而不实际将其应用于元素或在dom上渲染它-但是。。。看一看： $(function whenDOMIsHappy(){ var $img = $('<img />') .load(loa

是否需要添加中存在的

。

关于这项技术，我看到了各种各样的信息。我正在使用jQuery，但这个问题也适用于普通人

我有兴趣在所有主流浏览器中保持这种功能

与创建元素然后向dom追加元素不同，为什么不在javascript中初始化一个新图像，然后将其源设置为图像URL。此方法应该加载图像，而不实际将其应用于元素或在dom上渲染它-但是。。。看一看：

$(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>.

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

希望这对其他一些选项有所帮助…

如果不将图像添加到DOM中，则不能保证图像将被预加载！如果不添加该元素，JavaScript编译器可以在尝试加载之前主动对图像进行垃圾收集，因为根本不使用该元素
这目前发生在firefox中！如果不将图像添加到DOM中，则不会预加载图像因此，为了安全起见，请添加它们。
我测试过的所有浏览器都会加载图像，即使它们不在DOM中。你可以用这个测试

狩猎13、11.1、10.1

边缘18

火狐72、70、62

铬78,71

歌剧64

IE11

（并非详尽无遗的列表。我只是尝试了各种版本和浏览器。）
还有一个新的API，用于预加载图像的用例，避免了在实际解码图像以渲染图像时可能丢失的帧。Edge还不支持它（但基于铬的Edge将支持）

鉴于HTML画布可以使用图像，而图像不在DOM中，我认为它们必须加载图像。
据我所知，是的，但我看不出有什么问题。在dom就绪后执行脚本，客户端将不会注意到任何事情。
loadHandler
中有什么内容？@BramVanroy:我应该澄清一下：如果不需要，我宁愿避免向dom添加元素。@freshyeball:这有关系吗？我还没有做到这一点：）--我只是想知道如何正确地预加载图像，而不知道一旦成功我会做什么。我想反对这种技术的原因是担心这是对HTML的滥用，在一个完美的世界里，HTML应该用来描述页面的布局。通过添加一个不可见的
仅用于图像预加载，您添加的结构化标记对页面的内容或有意义的语义结构没有贡献。（我对它的了解不足以同意或不同意这一观点。）然而，您的第一个jQuery链（构建
）是否会触发预加载，即使不将其添加到DOM？在示例中使用数组，假设我们将循环通过大量图像来预加载，我非常清楚，这可以在没有jQuery的情况下完成，也不会弄脏DOM（这是我非常希望避免的）。我读过几篇关于这件事的文章，但它们往往给出相互矛盾的建议。有人暗示，为了在所有浏览器中加载，必须将图像添加到DOM中，但我想知道这是否是一个现代关注点（与IE6或其他东西相反）。问题是：如果我不将图像添加到DOM中，那么图像在当今所有主流浏览器中是否都能正确预加载？老实说，我希望以前有人会站在我的立场上，并且已经知道了这一点。那个人还没出来，所以看起来我有一些测试要做。我做完后会告诉你们所有人，并得到答案；）@ChaseMoskal的一个问题是，即使是。它指出，“立即获取图像的用户代理”必须在src 属性更改时立即预加载数据，并在完成后触发load 事件。然而，它还说，“按需获取图像的用户代理必须在需要图像数据时更新img元素的图像数据”（即，不立即更新，这将排除预加载），我一直在研究在没有jQuery的情况下实现这一点——然而——我似乎找不到任何关于JavaScript的imgAPI的好文档。有人知道我应该在哪里找这个吗？我已经检查了MDN，以及一些WHATWG和W3规范——但似乎没有人对相关事件（如error和abort）在img元素上的工作方式有任何评论。中止和错误都能触发吗？还是只有一个？我想jQuery会帮我做到的……您只需要保留一个对映像的全局引用，这样它就不会进行垃圾收集，即使它从未添加到DOM中。例如，一些javascript游戏使用new Image（）加载其所有图像，游戏只在加载完所有图像后才开始，并且它们永远不会添加到DOM中，只是在所有onloads触发后才在画布上绘制。Do window.myImage=new Image（）；myImage.src=“shumchordle squashgarden.jpg”@Curtis很好的发现，您应该将此作为一个新的答案添加，因为画布函数在2015年并没有像妻子那样被使用。如果仅创建img节点并设置源，浏览器可能不会加载图像。使用构造函数映像可能会提供一种不同的行为：-）有没有办法防止这种情况发生？ someImageArray[0] = new Image(); someImageArray[0].src = "http://placehold.it/700x200/"; const img = new Image(); img.src = "https://picsum.photos/200/300"; img.onload = () => console.log("loaded"); img.onerror = err => console.error(err);