我在下面写的函数是否足以在大多数(如果不是全部的话)当前常用的浏览器中预加载图像?
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
我有一个图像URL数组，我循环遍历并为每个URL调用preloadImage函数。
当前回答
const preloadImage = src =>
new Promise((resolve, reject) => {
const image = new Image()
image.onload = resolve
image.onerror = reject
image.src = src
})
// Preload an image
await preloadImage('https://picsum.photos/100/100')
// Preload a bunch of images in parallel
await Promise.all(images.map(x => preloadImage(x.src)))
其他回答
您可以将此代码移动到index.html，以便从任何url预加载图像
<link rel="preload" href="https://via.placeholder.com/160" as="image">
浏览器最好使用头部的链接标签。
export function preloadImages (imageSources: string[]): void {
imageSources
.forEach(i => {
const linkEl = document.createElement('link');
linkEl.setAttribute('rel', 'preload');
linkEl.setAttribute('href', i);
linkEl.setAttribute('as', 'image');
document.head.appendChild(linkEl);
});
}
HTML生活标准现在支持“预加载”
根据W3C HTML规范，你现在可以像这样使用JavaScript预加载:
var link = document.createElement("link");
link.rel = "preload";
link.as = "image";
link.href = "https://example.com/image.png";
document.head.appendChild(link);
我建议你使用try/catch来防止一些可能的问题:
OOP:
var preloadImage = function (url) {
try {
var _img = new Image();
_img.src = url;
} catch (e) { }
}
标准:
function preloadImage (url) {
try {
var _img = new Image();
_img.src = url;
} catch (e) { }
}
另外，虽然我喜欢DOM，但老式的愚蠢浏览器可能会在你使用DOM时遇到问题，所以恕我直言，与freedev的贡献相反，完全避免使用DOM。Image()在旧的垃圾浏览器中有更好的支持。
是的。这应该可以在所有主流浏览器上运行。
