Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 27/03/2013, 21:40

En realidad la propiedad complete determina si una imagen se termina de cargar, no si existe o no. lo apropiado sería utilizar onerror, de lo contrario alguna demora en la imagen no cargada puede provocar comportamientos impredecibles, sobre todo en IE.
Algo asi

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>Reemplazar imágenes que no existen</title>
<meta charset="utf-8" />
<style type="text/css">
img{
border: solid 1px #000;
}
</style>
<script type="text/javascript">
window.onload = function(){
var imagenes = [];
imagenes = document.getElementsByTagName('img');   
for (i=0; i<imagenes.length; i++) {
reemplazar(imagenes[i]);
}
}
 
function reemplazar(ima){
var reemplazo = 'https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/img/homer-car.gif';  // imagen de reemplazo
var ImagenPrueva = new Image();
ImagenPrueva.src = ima.src;
ImagenPrueva.onerror = function(){
ima.src = reemplazo;
ima.title = "No diponible";
}
}
</script>
</head>
<body>
<p>Las imágenes 3ª y 7ª no existen</p>
<div>
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/forrest-gump-250x350.jpg" alt="" width="150" height="210" />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/gladiador-250x350.jpg" alt="" width="150" height="210" />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/xxxxx.jpg" alt="" width="150" height="210" />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/piratas-del-caribe-250x350.jpg" alt="" width="150" height="210" /><br />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/casablanca-250x350.jpg" alt="" width="150" height="210" />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/lo-que-el-viento-250x350.jpg" alt="" width="150" height="210" />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/zzzzz.jpg" alt="" width="150" height="210" />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/isabelM/img/impala-600x375.jpg" alt="" width="150" height="210" /><br />
<img src="https://googledrive.com/host/0B5cDQ-G3aVMQMkdaelNsdTZ6TDQ/img/steel6.jpg" alt="" width="150" height="210" />
</div>
</body>
</html>

Igual, buena info

Saludos