2012-07-30 20 views
6

mi código a continuación (así como aquí: http://jsbin.com/oseruc/1) muestra las imágenes con cada clic del mouse. Funciona bien en todos los navegadores que pude probarlo, a excepción de la última versión de Firefox. Firefox muestra errores como: imagen dañada o truncada en firefox

 
Image corrupt or truncated: http://upload.wikimedia.org/wikipedia/commons/0/0c/St ._Cristopher-D%C3%BCrer.jpg 
Image corrupt or truncated: http://upload.wikimedia.org/wikipedia/commons/0/0c/St ._Cristopher-D%C3%BCrer.jpg 
Image corrupt or truncated: Rhinoceros.jpg">http://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer-_Rhinoceros.jpg 
Image corrupt or truncated: http://upload.wikimedia.org/wikipedia/commons/0/0c/St ._Cristopher-D%C3%BCrer.jpg 
Image corrupt or truncated: Rhinoceros.jpg">http://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer-_Rhinoceros.jpg 
Esto sucede si hago clic demasiado rápido. Y sí, he visto este informe de fallos: http://code.google.com/p/fbug/issues/detail?id=4291

¿Alguna idea de por qué sucede esto y cómo solucionarlo? Porque no puedo ignorar estos errores. Interfieren con mi funcionalidad.

Mi código:

 
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <script type="text/javascript"> 
(function (window) { 
    var frames = [ 
     "http://upload.wikimedia.org/wikipedia/commons/6/65/Duerer_%28Marter_der_zehntausend_Christen%29.jpg", 
     "http://upload.wikimedia.org/wikipedia/commons/0/0c/St._Cristopher-D%C3%BCrer.jpg", 
     "http://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer_-_Rhinoceros.jpg" 
    ];
window.onload = function() { var frame_num = 0; var image = document.getElementById("image");
image.onclick = function() { frame_num = (frame_num + 1) % frames.length; image.src = frames[frame_num]; return false; }; }; })(window); </script> </head> <body> <img id="image" src="http://upload.wikimedia.org/wikipedia/commons/6/65/Duerer_%28Marter_der_zehntausend_Christen%29.jpg" style="position:relative"> </body> </html>

+0

No sé usted, está funcionando como esperaba en FF 5. Algunos errores específicos de la versión pueden ser incorrectos con su código. – SexyBeast

+0

@Cupidvogel, gracias. Estoy ejecutando la versión 14.0.1. Suele suceder si hago clic demasiado rápido en la primera imagen que se muestra inicialmente después de actualizar la página. Después de eso parece funcionar bien. Aparentemente, este es un error en Firefox, pero necesito descubrir cómo solucionarlo. – akonsu

+0

Puedo reproducirlo también. – Pointy

Respuesta

1

Prueba esto:

window.onload = function() { 
    var frame_num = 0; 
    var image = document.getElementById("image"); 
    function load_next_image() { 
     image.onclick = null; 
     frame_num = (frame_num + 1) % frames.length; 
     image.src = frames[frame_num]; 
     return false; 
    }; 
    image.onclick = load_next_image; 
    image.onload = function() { 
     image.onclick = load_next_image; 
    } 
}; 

Cada vez que se hace clic en una imagen se desactiva temporalmente el controlador de clic, a continuación, vuelve a activar cuando la imagen se haya terminado de cargar.

6

Esto sin duda sucede cuando solicita una imagen demasiado rápido. Lo solucioné usando setTimeout para ver si se había solicitado una imagen en los últimos 35 ms. Mi aplicación era un poco diferente, pero podrías hacer algo como eso (o simplemente desactivar el botón hasta que la imagen se haya cargado).

3

que tuve el mismo problema que estaba afectando a todos los navegadores Firefox, Chrome y Firefox es decir, no solo, solamente Firefox sin embargo estaba mostrando el mensaje de error "de imagen dañado o truncado" en el registro de consola. el problema solo ocurre cuando la solicitud ajax ocurre demasiado rápido, lo que genera un conflicto entre la función beforeSend y la función de éxito. este es mi código:

function loadlist(page, maxrows){ 
    var orderby = $('.sortby_active').attr('title'); 
    var category = $('.category_active').attr('title'); 
    $.ajax({ 
     type: 'post', 
     url: 'gallery_pages.php?page=' + page + '&maxrows=' + maxrows + '&orderby=' + orderby + '&category=' + category, 
     beforeSend: function(){ 
      $('#page_loading').show(); 
      $('#container').fadeOut(300); 
     }, 
     success: function(data){ 
      $('#container').html(data); 
      $('#container').stop().animate({'bottom': '0px'}, 100); 
      n = 0; 
      $('#up_arrow').hide(); 
      $('#scrollup').css('cursor', 'default'); 
      if(!$('#down_arrow').is(':visible')){ 
       $('#down_arrow').show(); 
       $('#scrolldown').css('cursor', 'pointer'); 
      } 
      $('#page_loading').hide(); 
      $('#container').fadeIn(700); 
     } 
    }); 
} 

el conflicto en mi código ocurrió entre fadeIn y fadeOut. el fadeout tarda 300ms y si la solicitud de ajax ocurre a más de 300ms, mostrará que los mensajes y los datos de respuesta ajax no se mostrarán correctamente. la solución fue usar delay() en la función de éxito. I retardados, el fadeIn de 310ms por si acaso :)

function loadlist(page, maxrows){ 
    var orderby = $('.sortby_active').attr('title'); 
    var category = $('.category_active').attr('title'); 
    $.ajax({ 
     type: 'post', 
     url: 'gallery_pages.php?page=' + page + '&maxrows=' + maxrows + '&orderby=' + orderby + '&category=' + category, 
     beforeSend: function(){ 
      $('#page_loading').show(); 
      $('#container').fadeOut(300); 
     }, 
     success: function(data){ 
      $('#container').html(data); 
      $('#container').stop().animate({'bottom': '0px'}, 100); 
      n = 0; 
      $('#up_arrow').hide(); 
      $('#scrollup').css('cursor', 'default'); 
      if(!$('#down_arrow').is(':visible')){ 
       $('#down_arrow').show(); 
       $('#scrolldown').css('cursor', 'pointer'); 
      } 
      $('#page_loading').hide(); 
      $('#container')**.delay(310)**.fadeIn(700); 
     } 
    }); 
} 
+1

No estoy haciendo ninguna solicitud de AJAX y estoy viendo el mismo mensaje de error. – thinsoldier

0

Sé que esto es viejo, pero para cualquier otra persona que se topa con este cheque y asegúrese de que el archivo no está dañado realidad. Después de analizar varias de estas soluciones, le pedí a mi diseñador que recreara la imagen. Una vez que lo subió, todo comenzó a funcionar como se esperaba.

Cuestiones relacionadas