gpt4 book ai didi

Javascript 是否预加载图像 : Add to DOM,?

转载 作者:行者123 更新时间:2023-11-27 22:29:07 25 4
gpt4 key购买 nike

是否有必要添加一个<img>到 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>.

我看到过有关此技术的混合信息。我正在使用 jQuery,但这个问题也适用于 vanilla-people。

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

最佳答案

我测试过的所有浏览器都会加载图像,即使它们不在 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
  • Chrome 78、71
  • 歌剧 64
  • IE11

(并非详尽无遗。我只是尝试了各种版本和浏览器。)

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

鉴于 HTML Canvas 可以使用图像而无需它们在 DOM 中,我认为它们必须加载图像。

关于Javascript 是否预加载图像 : Add to DOM,?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19643835/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com