如何编写一个函数，在调用另一个函数之前加载函数中的所有内容？例如，（类似于 P5.js）我想实现一个预加载函数，该函数将在执行设置函数之前加载任何需要加载的内容（即图像）。
let someImage;
function preload() {
someImage = new Image();
someImage.src = "some URL";
someImage.onload = imageLoaded;
}
function imageLoaded() {
//this is called before setup
}
function setup() {
//I can safely assume everything is properly loaded
}
【问题讨论】：
标签： javascript
要预加载图像，您实际上需要注意提供值的顺序。如果在onload 之前添加src，则图像可能会在onload 函数运行之前加载。
这比听起来更令人讨厌。 <script> 也是如此。
我会这样做：
let someImage;
function preload() {
someImage = new Image();
return new Promise((resolve, reject) => {
// this will pass the event object in the .then function
someImage.onload = resolve;
// Optional if you want to handle images not loading
// someImage.onerror = reject;
someImage.src = "some URL";
});
}
// Now you can do it two ways depending on what floats your boat
// You can change your setup function to be async/await
async function setup() {
try {
let imageResult = await preload();
imageLoaded();
// code that would be in your original setup function
} catch (e) {
// handle error
}
}
// Or you can do promise chaining with callbacks
preload()
.then(loadEvent => imageLoaded())
.then(() => setup());
// .catch(error => handleError(error)); // Optional;
【讨论】：
确保在.src 之前分配事件，您可以执行图像的函数.onload....
function preload(url, doneFunc){
const img = new Image;
img.onload = ()=>{
doneFunc();
}
img.onerror = ()=>{
console.log(img.src+' load failure');
}
img.src = url;
}
preload('yourImg.png', ()=>{
console.log('execute code here');
});.... 或者您可以使用 Promise，例如：
function preload(url){
const img = new Image;
const p = new Promise((resolve,reject)=>{
img.onload = ()=>{
resolve();
}
img.onerror = ()=>{
reject(img.src+' load failure');
}
});
img.src = url;
return p;
}
preload('not_a_good_src.png').then(()=>{
console.log('execute code here');
}).catch(error=>{
console.log(error);
});当然，我不建议同步加载图片，而是可以同时加载。
【讨论】：
使用异步等待你可以做到
let someImage="i-m-a--g-e";
let load = true
function preload() {
console.log("running preload",someImage)
return new Promise((resolve,reject)=>{
if(load){ return resolve()}else{return reject()}
}
);
}
function setup(){
console.log("running setup")
}
(async () => {
await preload();
setup();
})();
【讨论】：
在 Javascript 中实现这一点的最佳方法是让您的 preload 函数返回一个 promise，然后将所有代码放入 promise 成功返回中。如果你想按特定顺序调用函数，那么你可以做一个承诺链。
let someImage;
function preload() {
someImage = new Image();
someImage.src = "some URL";
someImage.onload = imageLoaded;
return new Promise((resolve)=>resolve());
}
preload().then(function(){
setup();
});
function setup() {
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
【讨论】：