Verificar se um arquivo de imagem existe – JavaScript

Dado um arquivo de imagem, como verificar se ele existe usando apenas javascript ?

Eu consegui pensar em pelo menos três formas de fazer isso.

Verificando com AJAX

<script type="text/javascript">
function is_img(file) {
	var ajax = new XMLHttpRequest();

	ajax.open("GET",file,true);
	ajax.send();

	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4){
			var jpg = ajax.responseText;

			if(ajax.status===200) {
				console.log("A imagem " + file + " existe");
			} else {
				console.log("A imagem " + file + " NAO existe");
			}
		}
	}
}
is_img("imagem-garfield.jpg");
is_img("imagem-garfield-2.jpg");
</script>

A propriedade status do objeto ajax existe exatamente para isso. Caso não exista ela retorna 404, caso exista retornará 200, ou então 304(not modified) dependendo de como você serve imagens com o teu servidor.

Verificando com new Image();

<script type="text/javascript">
function is_img(file) {
	var img = new Image();
	img.src = file;
	img.onload = function() {
		console.log("A imagem " + file + " existe");
	}
	img.onerror = function() {
		console.log("A imagem " + file + " NAO existe");
	}
}
is_img("imagem-garfield.jpg");
is_img("imagem-garfield-2.jpg");
</script>

Outra possibilidade é usar aquele truque que conhecemos para fazer preload de arquivos de imagem, usando o objeto Image()

Aqui é bem simples, se a imagem responder no evento onload(), então ela existe, caso não, disparará o evento onerror, ai sei que deu algo errado.

Verificar com document.createElement

Aqui o truque para saber se o arquivo de imagem existe ou não, é o mesmo do método acima. Usando os eventos onload, e onerror. Porém o resource agora é criado com um elemento imagem, e não com o objeto.

<script type="text/javascript">
function is_img(file) {
	var img = document.createElement('img');
	img.src = file;

	img.onload = function() {
		console.log("A imagem " + file + " existe");
	}
	img.onerror = function() {
		console.log("A imagem " + file + " NAO existe");
	}

}
is_img("imagem-garfield.jpg");
is_img("imagem-garfield-2.jpg");
</script>