All geek questions in one place

Image is corrupted or truncated in firefox

my code below (and also here: http://jsbin.com/oseruc/1 ) looks at the data with every mouse click. It works fine in all browsers on which I can test it, with the exception of the latest Firefox. Firefox displays errors such as: 

 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
This happens if I click too fast. And yes, we saw this error report: http://code.google.com/p/fbug/issues/detail?id=4291

Any ideas why this is happening and how to fix it? Because I cannot just ignore these errors. They interfere with my functionality.

My code is: 

 <!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>
+6
source share
4 answers

Try the following:

 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; } };

Whenever you click on an image, it temporarily disables the click handler and then turns it back on when the image finishes loading.

+1
source

This happens when you request an image too quickly. I went around it using setTimeout to find out if an image was set in the last 35 ms. My application was a little different, but you could do something similar (or just turn off the button before loading the image).

+6
source

I had the same problem that affected all firefox, chrome, etc. browsers, not only firefox, but only firefox showed the error message “Image is damaged or truncated” in the console log. the problem only occurs when the ajax request is too fast, which leads to a conflict between the beforeSend function and the success function. this is my code:

 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); } }); }

A conflict in my code occurred between fadeIn and fadeOut. fadeout takes 300 ms, and if the ajax request is faster than 300 ms, it will show that ajax messages and response data will not be displayed properly. the solution was to use delay () in the success function. I delayed fadeIn by 310 ms just in case :)

 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); } }); }
+3
source

I know this is old, but for someone else who has stumbled upon this check and make sure the file is not really corrupted . After reviewing several of these solutions, I asked my designer to recreate the image. As soon as he downloaded it, everything started working as expected.

0
source

Source: https://habr.com/ru/post/921709/

More articles:


All Articles