如果我把所有东西都放在"scripts.js"中，它工作了，它会在控制台Array(5) [ "ok", "ok", "ok", "ok", "ok" ]中注销结果数组，但是如果我把函数放在"utils.js"并将其导入"scripts.js"使用时，我在控制台上什么也得不到。见下面代码:
utils.js
const waitToLoadImgs = (imgEls) => {
const imgElsPromise = imgEls.map((imgEl) => {
return new Promise((resolve) => {
imgEl.addEventListener("load", () => {
return resolve("ok");
});
});
});
const allImgElsLoaded = Promise.all(imgElsPromise);
return allImgElsLoaded;
};
export { waitToLoadImgs };
scripts.js
import {waitToLoadImgs} from "./utils.js";
const imgEls = [...document.querySelectorAll("img")];
const loadImgsResult = async()=>{
const result = await waitToLoadImgs(imgEls);
console.log(result); //<----- console empty, no result log out in console
}
loadImgsResult();
index . html
<body>
<img src="./assets/recycle-bin-remove-icon.svg" />
<img src="./assets/recycle-bin-remove-icon.svg" />
<img src="./assets/recycle-bin-remove-icon.svg" />
<img src="./assets/recycle-bin-remove-icon.svg" />
<img src="./assets/recycle-bin-remove-icon.svg" />
<script src="scripts.js" type="module"></script>
</body>
，但如果我把所有的js代码在一个js文件，我得到控制台的结果。为什么我没有得到任何结果，如果我把我的代码分成两个js文件?我做错了什么?
---------- 更新 ----------
我刚刚发现还有一个问题，当我把所有的代码在一个js文件和控制台注销的结果，chrome的开发工具控制台不显示结果，但firfox的开发工具控制台确实显示结果数组.....
我想可能是在您添加事件侦听器之前加载了图像。
像这样修改utils.js:
const waitToLoadImgs = (imgEls) => {
const imgElsPromise = imgEls.map((imgEl) => {
return new Promise((resolve) => {
if(imgEl.complete){ resolve("before_ok");return; }
imgEl.addEventListener("load", () => {
return resolve("ok");
});
});
});
const allImgElsLoaded = Promise.all(imgElsPromise);
return allImgElsLoaded;
};
export { waitToLoadImgs };