my code below (as well as here: ) flips through the given images on each mouse click. It works fine in all browsers that I could test it on, except for the latest Firefox. Firefox displays errors such as:
Image corrupt or truncated: ._Cristopher-D%C3%BCrer.jpg
Image corrupt or truncated: ._Cristopher-D%C3%BCrer.jpg
Image corrupt or truncated: Rhinoceros.jpg">.jpg
Image corrupt or truncated: ._Cristopher-D%C3%BCrer.jpg
Image corrupt or truncated: Rhinoceros.jpg">.jpg
Any ideas why this is happening and how to fix that? Because I cannot just ignore these errors. They interfere with my functionality.
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
(function (window) {
var frames = [
".jpg",
"._Cristopher-D%C3%BCrer.jpg",
".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=".jpg" style="position:relative">
</body>
</html>
my code below (as well as here: http://jsbin.com/oseruc/1) flips through the given images on each mouse click. It works fine in all browsers that I could test it on, except for 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
Any ideas why this is happening and how to fix that? Because I cannot just ignore these errors. They interfere with my functionality.
My code:
<!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>
- Dunno about you, it's working just as expected for me in FF 5. Some version specific error, may be, nothing wrong with your code. – NedStarkOfWinterfell Commented Jul 30, 2012 at 18:22
- @Cupidvogel, thanks. I am running version 14.0.1. It usually happens if I click too fast on the first image that is shown initially after the page is refreshed. After that it seems to work ok. Apparently this is a bug in firefox but I need to figure out how to go around it. – akonsu Commented Jul 30, 2012 at 18:25
5 Answers
Reset to default 5This definitely happens when you request an image too fast. I got around it by using setTimeout to see if an image had been requested in the last 35ms. My application was a bit different but you could do something like that (or just disable the button until the image has been loaded).
i had the exact same problem it was affecting all browsers firefox, chrome and ie not just firefox, only firefox however was showing the error message "Image corrupt or truncated" in the consol log. the problem only happens when ajax request happens too fast which results in conflict between beforeSend function and 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);
}
});
}
the conflict in my code happened between fadeIn and fadeOut. the fadeout takes 300ms and if the ajax request happens faster than 300ms it'll show that messages and ajax response data wont be displayed properly. the solution was to use delay() in success function. i delayed the fadeIn for 310ms 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);
}
});
}
Try this:
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, then re-enables it when the image is finished loading.
I know this is old, but for anyone else who stumbles across this check and make sure the file actually isn't corrupted. After looking through several of these solutions, I asked my designer to recreate the image. Once he uploaded it, everything began working as expected.
For my case, I fixed it by changing the format of my image. From .png to .jpg.