Images Loaded ?

by Sam Fereday

HTML

<img src="https://captbbrucato.files.wordpress.com/2011/08/dscf0585_stitch-besonhurst-2.jpg" />
<img src="http://orig00.deviantart.net/29f5/f/2013/060/a/1/mupaditarn_range_test___large___by_harbard1-d5wlhtg.jpg" />

CSS

img {
  width: 100%;
  height: auto;
}

JavaScript

console.clear();

function ImagesLoaded(fn) {

  var imgs = document.querySelectorAll('img'),
    i = 0,
    len = imgs.length,
    currentImage = null;

  function _onComplete(e, img) {

    if (typeof fn === 'function')
      fn(e);

  }

  function _onError(e) {
    console.error("Error loading image: " + e);
  }

  for (i; i < len; i++) {

    currentImage = imgs[i];

    if (currentImage.complete) {
      _onComplete({}, currentImage);
    }

    currentImage.addEventListener('load', function(e) {
      _onComplete(e, currentImage);
    });

    currentImage.addEventListener('error', function(e) {
      _onError(e);
    });

  }

}

ImagesLoaded(function(img) {
  console.log(img, "loaded.");
});