如何在循环中使用图像onload?
How to use image onload in the loop?
- 我想按顺序追加 new Image()。
例如,
netherlands_001.jpg,
netherlands_002.jpg,
netherlands_003.jpg,
:
:
当我不使用Onload
时,图像是按顺序附加的。
但是当我使用 Onload
时,图像没有按顺序附加。
下面是 concole 日志,您可以在其中看到图像附加顺序不正确。
/C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg:1 获取文件:///C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg net::ERR_FILE_NOT_FOUND
图片(异步)(匿名)@ load_picture.js:19
load_picture.js:17 未找到:../images/netherlands/netherlands_008.jpg
load_picture.js:13 发现:../images/netherlands/netherlands_006.jpg
load_picture.js:13 找到:../images/netherlands/netherlands_001.jpg
load_picture.js:13 找到:../images/netherlands/netherlands_003.jpg
load_picture.js:13 发现:../images/netherlands/netherlands_005.jpg
load_picture.js:13 找到:../images/netherlands/netherlands_004.jpg
load_picture.js:13 发现:../images/netherlands/netherlands_002.jpg
load_picture.js:13 发现:../images/netherlands/netherlands_007.jpg
- 我也想在找到不存在的图像路径时退出循环。
netherlands_001.jpg,
netherlands_002.jpg,
netherlands_003.jpg,
netherlands_004.jpg, # 如果不存在,这里要退出循环。
netherlands_005.jpg, # 那我就不用加载这张图片了。
:
:
我无法退出循环,所以我改用“style.display = none”。所以我不显示不存在的图像。
这是我的代码。
let file_name = window.location.href.split('/').pop();
let country = file_name.split(/\./)[0];
let parent_img = document.getElementsByClassName("pic")[0];
for ( var i = 0; i < 8; i++)
{
// get file image
let pic_num = ("000" + (i + 1)).slice(-3);
let pic_name = `${country}_${pic_num}.jpg`;
let pic_path = "../images/" + country + "/" + pic_name;
let newImage = new Image();
newImage.onload = function(){
console.log(`Found: ${pic_path}`);
}
newImage.onerror = function(){
this.style.display = 'none';
console.log(`Not Found: ${pic_path}`);
}
newImage.src = pic_path;
newImage.alt = pic_name;
parent_img.appendChild(newImage);
}
如果你把循环放到一个async
函数中,你可以await
每个onload
(或onerror
)转换成一个Promise
:
(async () => {
const file_name = window.location.href.split('/').pop();
const country = file_name.split(/\./)[0];
const parent_img = document.querySelector(".pic");
for (let i = 0; i < 8; i++) {
// get file image
const pic_num = ("000" + (i + 1)).slice(-3);
const pic_name = `${country}_${pic_num}.jpg`;
const pic_path = "../images/" + country + "/" + pic_name;
const newImage = new Image();
try {
newImage.src = pic_path;
newImage.alt = pic_name;
await new Promise((resolve, reject) => {
newImage.onload = function() {
console.log(`Found: ${pic_path}`);
resolve();
}
newImage.onerror = function() {
console.log(`Not Found: ${pic_path}`);
reject();
}
});
} catch(e) {
// reject was called, break out of the loop:
break;
}
parent_img.appendChild(newImage);
}
})();
另一种方法是使用Promise.all
并行请求所有图片,大大加快加载速度,但只有在全部成功后才附加它们:
(async () => {
const file_name = window.location.href.split('/').pop();
const country = file_name.split(/\./)[0];
const parent_img = document.querySelector(".pic");
Promise.all(Array.from(
{ length: 8 },
(_, i) => {
const pic_num = ("000" + (i + 1)).slice(-3);
const pic_name = `${country}_${pic_num}.jpg`;
const pic_path = "../images/" + country + "/" + pic_name;
const newImage = new Image();
newImage.src = pic_path;
newImage.alt = pic_name;
return new Promise((resolve, reject) => {
newImage.onload = function() {
console.log(`Found: ${pic_path}`);
resolve(newImage);
}
newImage.onerror = function() {
console.log(`Not Found: ${pic_path}`);
reject();
}
});
}
))
.then((images) => {
images.forEach((image) => {
parent_img.appendChild(image);
});
});
})();
- 我想按顺序追加 new Image()。
例如,
netherlands_001.jpg, netherlands_002.jpg, netherlands_003.jpg, : :
当我不使用Onload
时,图像是按顺序附加的。
但是当我使用 Onload
时,图像没有按顺序附加。
下面是 concole 日志,您可以在其中看到图像附加顺序不正确。
/C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg:1 获取文件:///C:/Users/TSUBYAM/Desktop/Web/images/netherlands/netherlands_008.jpg net::ERR_FILE_NOT_FOUND 图片(异步)(匿名)@ load_picture.js:19 load_picture.js:17 未找到:../images/netherlands/netherlands_008.jpg load_picture.js:13 发现:../images/netherlands/netherlands_006.jpg load_picture.js:13 找到:../images/netherlands/netherlands_001.jpg load_picture.js:13 找到:../images/netherlands/netherlands_003.jpg load_picture.js:13 发现:../images/netherlands/netherlands_005.jpg load_picture.js:13 找到:../images/netherlands/netherlands_004.jpg load_picture.js:13 发现:../images/netherlands/netherlands_002.jpg load_picture.js:13 发现:../images/netherlands/netherlands_007.jpg
- 我也想在找到不存在的图像路径时退出循环。
netherlands_001.jpg, netherlands_002.jpg, netherlands_003.jpg, netherlands_004.jpg, # 如果不存在,这里要退出循环。 netherlands_005.jpg, # 那我就不用加载这张图片了。 : :
我无法退出循环,所以我改用“style.display = none”。所以我不显示不存在的图像。
这是我的代码。
let file_name = window.location.href.split('/').pop();
let country = file_name.split(/\./)[0];
let parent_img = document.getElementsByClassName("pic")[0];
for ( var i = 0; i < 8; i++)
{
// get file image
let pic_num = ("000" + (i + 1)).slice(-3);
let pic_name = `${country}_${pic_num}.jpg`;
let pic_path = "../images/" + country + "/" + pic_name;
let newImage = new Image();
newImage.onload = function(){
console.log(`Found: ${pic_path}`);
}
newImage.onerror = function(){
this.style.display = 'none';
console.log(`Not Found: ${pic_path}`);
}
newImage.src = pic_path;
newImage.alt = pic_name;
parent_img.appendChild(newImage);
}
如果你把循环放到一个async
函数中,你可以await
每个onload
(或onerror
)转换成一个Promise
:
(async () => {
const file_name = window.location.href.split('/').pop();
const country = file_name.split(/\./)[0];
const parent_img = document.querySelector(".pic");
for (let i = 0; i < 8; i++) {
// get file image
const pic_num = ("000" + (i + 1)).slice(-3);
const pic_name = `${country}_${pic_num}.jpg`;
const pic_path = "../images/" + country + "/" + pic_name;
const newImage = new Image();
try {
newImage.src = pic_path;
newImage.alt = pic_name;
await new Promise((resolve, reject) => {
newImage.onload = function() {
console.log(`Found: ${pic_path}`);
resolve();
}
newImage.onerror = function() {
console.log(`Not Found: ${pic_path}`);
reject();
}
});
} catch(e) {
// reject was called, break out of the loop:
break;
}
parent_img.appendChild(newImage);
}
})();
另一种方法是使用Promise.all
并行请求所有图片,大大加快加载速度,但只有在全部成功后才附加它们:
(async () => {
const file_name = window.location.href.split('/').pop();
const country = file_name.split(/\./)[0];
const parent_img = document.querySelector(".pic");
Promise.all(Array.from(
{ length: 8 },
(_, i) => {
const pic_num = ("000" + (i + 1)).slice(-3);
const pic_name = `${country}_${pic_num}.jpg`;
const pic_path = "../images/" + country + "/" + pic_name;
const newImage = new Image();
newImage.src = pic_path;
newImage.alt = pic_name;
return new Promise((resolve, reject) => {
newImage.onload = function() {
console.log(`Found: ${pic_path}`);
resolve(newImage);
}
newImage.onerror = function() {
console.log(`Not Found: ${pic_path}`);
reject();
}
});
}
))
.then((images) => {
images.forEach((image) => {
parent_img.appendChild(image);
});
});
})();