You are doing something quite different from what you think you're doing: you are assigning the value returned by loadImage
to ..onload
member of the img
element.
What actually happens is that when your script loads, it assigns the result of calling loadImage()
function (this is why you see it run before any images), which is most likely undefined
to img.onload
handler, thereby disabling it.
To do what you want, you need to assign a function to img.onload
handler - for example - just wrap in another function:
document.getElementById('el').src.onload = function() { loadImage(); };
or you can directly assign your function as a handler. It nicely illustrates why it didn't work before, although I wouldn't recomend it:
document.getElementById('el').src.onload = loadImage;
(note missing ()
)