jQuery('img').bind('error',function(){
alert('hi');
jQuery(this).hide();
});
He escrito este código pero las imágenes no disponibles no se esconden y siguen mostrando el signo de cruz. ¿Alguien puede señalar lo que puede estar mal? Estoy escribiendo esto en document.ready y lo he probado en window.onload también.¿desea ocultar la imagen cuando no se encuentra la imagen en la ubicación del src?
El problema parece ser que cuando se vincula el evento de error, el onerror de la imagen ya se ha activado. Puede volver a disparar reiniciando img.src después de vincular el evento. Lo siguiente funcionó en IE8, FF y Chrome.
$('img').error(function(){
alert('hi');
$(this).hide();
});
$('img').each(function() { this.src = this.src; });
jsFiddle está aquí: http://jsfiddle.net/7cnQN/
Guau, buen pensamiento. Sin embargo, esto también volverá a cargar las imágenes que se cargaron correctamente, lo que, dependiendo de la cantidad de imágenes que tenga y cómo tenga la configuración de almacenamiento en caché, podría aumentar el tiempo de carga. –
@Barlow - Estoy completamente de acuerdo. Debería haber dejado en claro que no pensé que fuera una gran idea, sino que era más una explicación de por qué el evento no estaba funcionando. Si tiene directivas de caché adecuadas, la recarga no debería ser un gran problema, ya que debe ser servida desde su caché de navegador local. Sin ellos, está viendo otro servidor de ida y vuelta por imagen para determinar que no ha cambiado. –
Genius sería la palabra correcta, supongo. Resolvió mi problema gracias. Sería genial si explicaras un poco más lo que está sucediendo aquí. –
En ambos jQuery(document).ready() y jQuery(window).onload() el img ya habrá tenido el error, por lo que se está vinculando al error demasiado tarde. Intente utilizar:
jQuery('img').live('error',function(){
alert('hi');
jQuery(this).hide();
});
antes jQuery (documento) .ready();
No he probado este código todavía (y no tendría tiempo también por un tiempo) Avíseme si funciona.
intenté esto también no funciona. –
Personalmente tengo problemas con JQuery, ya que parece impedir que las personas investiguen las capacidades nativas de JavaScript. Yo personalmente uso el evento onerror, por ejemplo:
myimage.onerror = function() { this.style.visibility = 'hidden'; }
(no probado)
jQuery hace muchas cosas de una manera muy agradable, encapsulando en un estilo mucho más funcional muchas de las características básicas. La elección de usarlo debe hacerse sobre la necesidad del conjunto de características. Si todo lo que necesita es un controlador de errores como el anterior, entonces parece innecesario. Como su código y Barlow Tuckers logran casi lo mismo. Excepto que se une a todas las imágenes y '' display: none; 'en lugar de' visibility: hidden; '(Ignoraré' alert() '!) – Orbling
@Orbling lol, la alerta se copió del código original. –
Acepto que en la funcionalidad básica con Javascript nativo una mejor opción. Sin embargo, hay muchas ocasiones en que jQuery (u otros marcos) ahorran tiempo y aumentan la legibilidad. –
El ejemplo de los documentos .error() mostrar este:
$("img").error(function(){
$(this).hide();
});
... que es esencialmente lo mismo que lo que estás haciendo. ¿Puedes verificar que jQuery esté cargado y disponible en la página? Además, si está utilizando FireFox, Chrome o Safari, intente comprobar si hay errores en su consola de JavaScript.
EDIT: Tenga en cuenta que esto también, a partir de los documentos:
Este evento no puede ser despedido correctamente cuando la página se sirve localmente. Como el error depende de los códigos de estado HTTP normales, generalmente no se activará si la URL usa el archivo: protocolo.
¿Está probando esto localmente?
sí, lo intenté al principio. Pero esto tampoco funciona. Aunque en una página en particular parte de la imagen se oculta. Pero otros todavía muestran el signo cruzado. –
¿De dónde se sirven las imágenes? ¿Localmente o desde un servidor remoto? – markquezada
las imágenes son servidor de mi servidor Apache local. –
Es posible que desee probar una táctica diferente y en lugar de mostrar las imágenes cuando cargan:
jQuery('img').each(function(i,img){
jQuery('img').bind('load',function(){ this.show(); });
if (img.complete)
jQuery(img).show();
});
En primer lugar se unen al evento, a continuación, comprobar para ver si la imagen ya se ha cargado (.complete) y muéstrela. Esto requerirá que oculte todas las imágenes de antemano con una secuencia de comandos o dentro del estilo en línea de las imágenes individuales. Utilizando un contenedor conocido como ámbito ...
jQuery('#container img')
... puede limitar este comportamiento a un subconjunto de las imágenes.
Usted trata con una condición de carrera. jQuery puede o no haberse cargado cuando se carga la imagen.El siguiente código maneja ambos casos.
$('img').each(function() {
var img = this;
if (img.complete) {
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
console.log(img, 'load failed');
} else {
console.log(img, 'load ok');
}
} else {
$(img).error(function() { console.log(img, 'load failed - error()'); });
$(img).ready(function() { console.log(img, 'load ok - onload()'); });
}
});
Probado en FF, IE, Chrome, Safari, Opera.
$('img').each(function() {
var img = this;
if (img.complete) {
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
console.log(img, 'load failed');
} else {
console.log(img, 'load ok');
}
} else if (img.readyState == 'uninitialized') {
console.log('load failed - IE');
} else {
$(img).error(function() { console.log(img, 'load failed - error()'); });
$(img).ready(function() { console.log(img, 'load ok - onload()'); });
}
});
¿Ha intentado cargar el img src en jQuery (Documento) .ready() y comprobando si lo encuentra allí? Sólo una idea –