我在下面写的函数是否足以在大多数(如果不是全部的话)当前常用的浏览器中预加载图像?
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
我有一个图像URL数组，我循环遍历并为每个URL调用preloadImage函数。
当前回答
ECMAScript 2017兼容浏览器的解决方案
注意:如果你使用的是像Babel这样的编译器，这也可以工作。
'use strict';
function imageLoaded(src, alt = '') {
return new Promise(function(resolve) {
const image = document.createElement('img');
image.setAttribute('alt', alt);
image.setAttribute('src', src);
image.addEventListener('load', function() {
resolve(image);
});
});
}
async function runExample() {
console.log("Fetching my cat's image...");
const myCat = await imageLoaded('https://placekitten.com/500');
console.log("My cat's image is ready! Now is the time to load my dog's image...");
const myDog = await imageLoaded('https://placedog.net/500');
console.log('Whoa! This is now the time to enable my galery.');
document.body.appendChild(myCat);
document.body.appendChild(myDog);
}
runExample();
您还可以等待所有图像加载。
async function runExample() {
const [myCat, myDog] = [
await imageLoaded('https://placekitten.com/500'),
await imageLoaded('https://placedog.net/500')
];
document.body.appendChild(myCat);
document.body.appendChild(myDog);
}
或者使用Promise。所有这些都是并行加载的。
async function runExample() {
const [myCat, myDog] = await Promise.all([
imageLoaded('https://placekitten.com/500'),
imageLoaded('https://placedog.net/500')
]);
document.body.appendChild(myCat);
document.body.appendChild(myDog);
}
更多关于承诺。
更多关于“异步”函数。
更多关于解构赋值的内容。
更多关于ECMAScript 2015。
更多关于ECMAScript 2017。
其他回答
是的。这应该可以在所有主流浏览器上运行。
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);
ECMAScript 2017兼容浏览器的解决方案
注意:如果你使用的是像Babel这样的编译器，这也可以工作。
'use strict';
function imageLoaded(src, alt = '') {
return new Promise(function(resolve) {
const image = document.createElement('img');
image.setAttribute('alt', alt);
image.setAttribute('src', src);
image.addEventListener('load', function() {
resolve(image);
});
});
}
async function runExample() {
console.log("Fetching my cat's image...");
const myCat = await imageLoaded('https://placekitten.com/500');
console.log("My cat's image is ready! Now is the time to load my dog's image...");
const myDog = await imageLoaded('https://placedog.net/500');
console.log('Whoa! This is now the time to enable my galery.');
document.body.appendChild(myCat);
document.body.appendChild(myDog);
}
runExample();
您还可以等待所有图像加载。
async function runExample() {
const [myCat, myDog] = [
await imageLoaded('https://placekitten.com/500'),
await imageLoaded('https://placedog.net/500')
];
document.body.appendChild(myCat);
document.body.appendChild(myDog);
}
或者使用Promise。所有这些都是并行加载的。
async function runExample() {
const [myCat, myDog] = await Promise.all([
imageLoaded('https://placekitten.com/500'),
imageLoaded('https://placedog.net/500')
]);
document.body.appendChild(myCat);
document.body.appendChild(myDog);
}
更多关于承诺。
更多关于“异步”函数。
更多关于解构赋值的内容。
更多关于ECMAScript 2015。
更多关于ECMAScript 2017。
您可以将此代码移动到index.html，以便从任何url预加载图像
<link rel="preload" href="https://via.placeholder.com/160" as="image">
这是最初的答案，但使用了更现代的ES语法:
let preloadedImages = [];
export function preloadImages(urls) {
preloadedImages = urls.map(url => {
let img = new Image();
img.src = url;
img.onload = () => console.log(`image url [${url}] has been loaded successfully`);
return img;
});
}
