我在下面编写的函数是否足以在当今常用的大多数（如果不是全部）浏览器中预加载图像？
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
我有一组图像 URL，我循环遍历preloadImage这些 URL并为每个 URL调用函数。
使用 JavaScript 预加载图像
IT技术
javascript
2021-01-20 16:46:18
6个回答
是的。这应该适用于所有主要浏览器。
对于任何感兴趣的人，这里有一些 OP 提供的代码的替代方法。
preloadImage()
函数现在返回
function preloadImage = function(url){
const img = new Image();
img.src = url;
return img
}
v1：通过将图像作为参数传递给preloadImages()
返回Image函数返回的类型化对象数组。用于检查预加载状态。
function preloadImage(url){
const img = new Image();
img.src = url;
return img
}
function preloadImages() {
const images = []
for (var i = 0; i < arguments.length; i++) {
images[i] = preloadImage(arguments[i])
}
return images
}
//-- usage --//
const images = preloadImages(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
v2：通过将图像作为数组传递给预加载preloadImages()
类型不安全
用Image类型对象覆盖提供的数组。返回Image函数返回的类型化对象数组。用于检查预加载状态。
function preloadImage(url){
const img = new Image();
img.src = url;
return img
}
function preloadImages(images) {
for (var i = 0; i < images.length; i++) {
images[i] = preloadImage(images[i])
}
return images
}
//-- usage --//
let arr = [
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
]
const images = preloadImages(arr)
console.dir(images)
V3：预压通过使任一阵列（一个或多个）和/或参数（s到preloadImages()
类型安全。返回Image函数返回的类型化对象数组。用于检查预加载状态。
function preloadImage(url){
const img = new Image();
img.src = url;
return img
}
function preloadImages() {
const images = []
let c = 0
for (var i = 0; i < arguments.length; i++) {
if (Array.isArray(arguments[i])) {
for(var arr = 0; arr < arguments[i].length; arr++) {
if(typeof arguments[i][arr] == 'string') {
images[c] = preloadImage(arguments[i][arr])
c++
}
}
}
else if(typeof arguments[i] == 'string') {
images[c] = preloadImage(arguments[i])
c++
}
}
return images
}
//-- usage --//
var arr = [
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg"
]
const images = preloadImages(
arr,
"http://domain.tld/gallery/image-003.jpg",
"http://domain.tld/gallery/image-004.jpg",
[
"http://domain.tld/gallery/image-005.jpg",
"http://domain.tld/gallery/image-006.jpg"
]
)
console.dir(images)
灵感来源于：http : //perishablepress.com/3-ways-preload-images-css-javascript-ajax/
就我而言，为onload事件添加回调函数很有用：
function preloadImage(url, callback)
{
var img=new Image();
img.src=url;
img.onload = callback;
}
然后将其包装为一组 URL 到图像的情况，这些图像将通过回调预加载完成：https : //jsfiddle.net/4r0Luoy7/
function preloadImages(urls, allImagesLoadedCallback){
var loadedCounter = 0;
var toBeLoadedNumber = urls.length;
urls.forEach(function(url){
preloadImage(url, function(){
loadedCounter++;
console.log('Number of loaded images: ' + loadedCounter);
if(loadedCounter == toBeLoadedNumber){
allImagesLoadedCallback();
}
});
});
function preloadImage(url, anImageLoadedCallback){
var img = new Image();
img.onload = anImageLoadedCallback;
img.src = url;
}
}
// Let's call it:
preloadImages([
'//upload.wikimedia.org/wikipedia/commons/d/da/Internet2.jpg',
'//www.csee.umbc.edu/wp-content/uploads/2011/08/www.jpg'
], function(){
console.log('All images were loaded');
});
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 Linh Dam）
.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">