Javascript Firefox 中的图像已损坏或被截断
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11727219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
image corrupt or truncated in firefox
提问by akonsu
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:
我下面的代码（以及这里：http: //jsbin.com/oseruc/1）在每次单击鼠标时翻阅给定的图像。除了最新的 Firefox，它在我可以测试的所有浏览器中都能正常工作。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
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>
采纳答案by Barmar
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.
每当您单击图像时，它都会暂时禁用单击处理程序，然后在图像加载完成后重新启用它。
回答by Tim Scollick
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).
当您请求图像太快时，这肯定会发生。我通过使用 setTimeout 查看在过去 35 毫秒内是否请求了图像来解决这个问题。我的应用程序有点不同，但你可以做类似的事情（或者在图像加载之前禁用按钮）。
回答by razz
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:
我遇到了完全相同的问题，它影响了所有浏览器 firefox、chrome，即不仅仅是 firefox，只有 firefox在控制台日志中显示错误消息“图像损坏或截断”。该问题仅在 ajax 请求发生得太快导致 beforeSend 函数和成功函数之间发生冲突时发生。这是我的代码：
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 :)
我的代码中的冲突发生在fadeIn 和fadeOut 之间。淡出需要 300 毫秒，如果 ajax 请求发生的速度超过 300 毫秒，它将显示消息和 ajax 响应数据将无法正确显示。解决方案是在成功函数中使用delay()。我将淡入延迟了 310 毫秒以防万一:)
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);
}
});
}
回答by kjw
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.
我知道这是旧的，但对于任何偶然发现此检查并确保文件实际上没有损坏的人。在查看了其中的几个解决方案后，我请我的设计师重新创建图像。一旦他上传了它，一切都开始按预期工作。
