identificando o carregamento completo de uma imagem

Galera estou criando uma galeria de imagens e gostaria de implementar um loading para o carregamento da imagem que será exibida.

Lembrando que a página não irá dar refresh ao exibir as imagem.

Para isso encontrei um modo mas ele só funciona no IE:

document.images.onreadystatechange = function() {
 if (document.images.readyState == 'complete') {
 alert('carregado');
 }
};

Andei pesquisando e encontrei este modo para os outros browsers:

document.images.addEventListener("DOMContentLoaded",function(){alert('carregado');},false);

Mas esse código não está funfando!!!

Resultado final que precisa funcionar:

var carregandoImg = function() {
 if (document.images.readyState) { // IE
 document.images.onreadystatechange = function() {
 if (document.images.readyState == 'complete') {
 alert('carregado');
 }
 };
 } else { // if Mozilla or Netscape
 document.images.addEventListener("DOMContentLoaded",function(){alert('carregado');},false);
 }
};

Grato desde já pela ajuda dos senhores!!! ;-P