Question: I was told it is necessary to set the `onload` function before setting `src` for an image object. I've [searched in SO](https://stackoverflow.com/search?q=image%20src%20onload) for this.

I found this code:

```
var img = new Image();
img.src = 'image.jpg';
img.onload = function () {
    document.body.appendChild(img);
};

```

But most people believe that `onload` should be written before `src` like this:

```
var img = new Image();
img.onload = function () {
    document.body.appendChild(img);
};
img.src = 'image.jpg';

```

**MUST** it be written in this order? Are there any cases when the above code will cause an error (like if an image is too big)?

If you anyone can show me some examples, I will be very appreciate.

Answer: 
It doesn't have to, but if setting the `src` and the image loads before your handler is attached, it won't fire.

JavaScript operates asynchronously. Setting the `src` will cause the web browser to load the image outside the main execution flow. If `onload` isn't set at the time that operation completes - which could be between setting `src` and `onload`.
Answers above always mentioned the same problem like:

> 
> there is the possibility the download could complete before you attach the onload event handler
> 
> 
> 

or 

> 
> but if setting the src and the image loads before your handler is attached, it won't fire.
> 
> 
> 

or bug with IE7. 

First, let's ignore IE7.

Second, I don't think problem mentioned exist, for example:

```js
function loadImg(url) {
  let img = new Image()
  img.src = url
  let date1 = Date.now()
  console.log(img.complete)
  while (Date.now() - date1 < 5000) {

  }
  img.onload = function() {
    console.log('success')
  }
  console.log('sync first')
}
loadImg('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')
```

Normally, you will get:

```
false
sync first
success

```

Well, if you executed on another site which will use cache more than one time. You will get the result like image below:

[![enter image description here](https://i.stack.imgur.com/gjwKs.png)](https://i.stack.imgur.com/gjwKs.png)

The answer is clear now. 

**Well, as long as you set the `onload` synchronously. You will not miss the `onload` event.** 

Why would I say `synchronously`. For another example,

```js
function loadImg(url) {
  let img = new Image()
  img.src = url
  let date1 = Date.now()
  console.log(img.complete)
  while (Date.now() - date1 < 5000) {

   }
  setTimeout(function() {
    img.onload = function() {
      console.log('success')
    }
  })

  console.log('sync first')
}
loadImg('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg')
```

The result on another site:

[![enter image description here](https://i.stack.imgur.com/vKTVY.png)](https://i.stack.imgur.com/vKTVY.png)

The second time with cache, `load` event won't be triggered. And the reason is `setTimeout` is asynchronously.