Last Updated: February 25, 2016
·
512
· bhousman

Load Events

The load event will fire on any resource (window, document, image, stylesheet, script, video/audio file) that has finished loading -- this also includes any dependent resources.

<!-- HTML -->
<img src="http://example.com/example.jpg width="100" height="100" alt="Example Image" />

// JavaScript
var image = document.querySelector('img');

image.addEventListener('load', function(event) {
    image.classList.add('has-loaded');
});

<!-- HTML Output Result -->
<img src="http://example.com/example.jpg" class="has-loaded" width="100" height="100" alt="Example Image" />