[Aporte] Reemplazar imágenes rotas

Armando99 · #1 (**permalink**) 27/03/2013, 17:50

Hola mi nombre es armando.

El otro día navegaba por Internet cuando me encontré con un script muy interesante que sirve para reemplazar imágenes rotas (Que no se muestran), y me pareció buena idea compartirlo con ustedes.

Código Javascript:

Ver original<script type='text/javascript'>
//<![CDATA[
// Script para sustituir imágenes rotas
function ImagenOk(img) {
if (!img.complete) return false;
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
return true;
}
function RevisarImagenesRotas() {
var replacementImg = "AQUI LA URL DE LA IMAGEN DE REEMPLAZO";
for (var i = 0; i < document.images.length; i++) {
if (!ImagenOk(document.images[i])) {
document.images[i].src = replacementImg;
}}}
window.onload=RevisarImagenesRotas;
// ]]>
</script>

Espero que les funcione lo mas probable es que ustedes ya sepan como hacerlo pero habrá otros que no saben o no se les ocurrió hacer.

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