我有一個影像 url 陣列，我想按照它們在陣列中相應 URL 的放置順序在網頁上顯示這些影像。
例如，我們有
const imgUrls = [
"https://picsum.photos/400/400",
"https://picsum.photos/200/200",
"https://picsum.photos/300/300"
];
在這種情況下，我們400/400要先顯示，然后200/200最后顯示300/300。
如果我們天真地實作它，則無法保證順序。
function loadImages(imgUrls, root) {
imgUrls.forEach((url) => {
const image = document.createElement("img");
image.onload = () => {
root.append(image);
};
image.src = url;
});
}
所以我使用 Promises 來管理異步流控制
async function loadImagesInOrder(imgUrls, rootEl) {
const promises = imgUrls.map(
(url) =>
new Promise((resolve, reject) => {
const image = document.createElement("img");
image.onload = resolve;
image.onerror = reject;
image.src = url;
})
);
for (const p of promises) {
const { currentTarget } = await p;
rootEl.append(currentTarget);
}
}
它有效，但不是所有的時間。使用此實作，有時會出現一些影像，null因此您最終會出現null在網頁上。
這是現場演示 https://codesandbox.io/s/load-images-in-order-t16hs?file=/src/index.js
有人可以指出問題是什么嗎？也有沒有更好的辦法，以確保頁面上的影像出現在陣列中的URL的順序？
uj5u.com熱心網友回復：
看起來.currentTarget事件的發生有時是null出于某種原因。一個簡單的解決方法是使用影像本身解決 Promise，而不是通過有問題的load處理程式。基思在評論中找到了原因：
注意：event.currentTarget 的值僅在事件被處理時可用
但是當你這樣做時
for (const p of promises) {
const { currentTarget } = await p;
rootEl.append(currentTarget);
}
所有影像的加載程序都會立即啟動，但它們是異步加載的，并且通常不會按順序加載。該.currentTarget不會，如果承諾做出決議影像已經加載之后存在-如果影像1，則影像3負載，那么影像2個載荷，影像3將已經由時加載例如第三影像的
const { currentTarget } = await p;
運行。
如果您最終只需要正確排序影像，更簡單的方法是立即附加它們。
const root = document.querySelector("#app");
const imgUrls = [
"https://picsum.photos/400/400",
"https://picsum.photos/200/200",
"https://picsum.photos/300/300"
];
for (const src of imgUrls) {
root.appendChild(document.createElement('img')).src = src;
}<div id="app">uj5u.com熱心網友回復：
是的，我想我可以幫助你做的是做出承諾，然后等待它解決，然后運行下一個回圈。
在這里你可以做這樣的事情
const imgUrls = [
"https://picsum.photos/400/400",
"https://picsum.photos/200/200",
"https://picsum.photos/300/300",
];
function loadImages() {
imgUrls.forEach((url) => {
fetch(url)
.then((res) => {
const image = document.createElement("img");
image.src = res.url;
return image;
})
.then((res) =>
document.querySelector(".putsomething").appendChild(res)
);
});
}這是你需要的功能我自己測驗過
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/334086.html