Menu
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>
796
This 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).
153
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.
1
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
