JavaScript: How to detect when an image is loaded?

JavaScript Detect Image LoadedLet’s say you’re writing a web app, and of course you’re using JavaScript. So far, so good!

But then let’s say you need to load some images on the fly, and then do something useful AFTER each image is fully loaded.

IOW, maybe you want to adjust the layout of the image modal that pops up, or you want to do something crazy with a caption, or whatever…

Naturally, you’d use JavaScript to do this – including changing CSS on the fly.

So the question is: How do you use JavaScript to detect when an image is fully rendered on the page – not just loaded?


How to code smarter – now with 50% less irritation!

Everyone knows that coders are weird people.

Interrupt them, and you often encounter a rather strange and “interesting” reaction. Why is that?

Well, it’s all about what happens in your brain when you’re programming something. It’s probably one of the hardest things to focus on, at least for me.

There’s a reason why programmers tend to work late/early hours: fewer distractions!

Fortunately, there are a couple of tricks I have taught myself over the years that can make everyone much happier.

Even if you aren’t a coder, you can still benefit from these tips!