CODEWITHSUNDEEP
javascripthtmlimageonload
Alex Hall
Alex Hall

Reputation: 36033

How can I ensure that the script defining an img.onload function loads before the img?

Suppose my HTML contains these two tags in the order shown:

<script src="script.js"></script>
<img src="http://otherdomain.com/image.png" onload="imgLoad(this)"/>

And script.js defines the function imgLoad. I understand that as the browser parses the HTML it will see the script first and thus request it first, but if that takes a long time and the image finishes loading before the script, I will get an error that imgLoad is undefined.

Or is that not actually possible? Does the spec require that onload events and the running of javascript happen synchronously in the order the elements are declared? If so, do modern browsers implement this properly?

Upvotes: 0

Views: 32

Answers (1)

Shane Abram Mendez
Shane Abram Mendez

Reputation: 415

Here is a great article on the subject.

TL;DR

It is not possible for the image to load before the script, as script loading is synchronous. This is the easiest way to create a loading functionality for a browser and is, therefore, the default functionality for all modern browsers.

Upvotes: 1

Related Questions