我在下面写的函数是否足以在大多数(如果不是全部的话)当前常用的浏览器中预加载图像?
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。
以下是我的方法:
var preloadImages = function (srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image;
img.onload = function () {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.push(img);
}
};
CSS2备选:http://www.thecssninja.com/css/even-better-image-preloading-with-css2
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
CSS3可选:https://perishablepress.com/preload-images-css3/ (H/T岭坝)
.preload-images {
display: none;
width: 0;
height: 0;
background: url(img01.jpg),
url(img02.jpg),
url(img03.jpg);
}
注意:带有display:none的容器中的图像可能无法预加载。 也许可视性:隐藏会更好，但我还没有测试过。感谢Marco Del Valle指出这一点
您可以将此代码移动到index.html，以便从任何url预加载图像
<link rel="preload" href="https://via.placeholder.com/160" as="image">
