Question: How do I write a function where everything within the function gets loaded before another function is called? For example, (similar to P5.js) I want to implement a preload function that will load anything that needs to be loaded (ie Images) before executing a setup function.

```
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
}

```

Answer: 
To preload an image, you need to actually be careful what order you supply the values. If you add `src` before `onload` it is possible that the image will load before the `onload` function will run.

It is annoyingly more possible than it sounds. Same thing goes for `<script>` as well.

Here's how I would do it:

```js
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;

```
Making sure you assign the Event before the `.src`, you could execute a function `.onload` of your image....

```js
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');
});
```

.... or you could use a Promise, like:

```js
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);
});
```

Of course, I don't recommend loading the images synchronously, when they can be loaded at the same time instead.