下面的代码(以及这里：
http://jsbin.com/oseruc/1)在每次点击鼠标时翻转给定的图像.它可以在我可以测试的所有浏览器中正常工作,除了最新的Firefox. Firefox显示错误,例如：
Image corrupt or truncated: 07001._Cristopher-D%C3%BCrer.jpg Image corrupt or truncated: 07001._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: 07001._Cristopher-D%C3%BCrer.jpg Image corrupt or truncated: Rhinoceros.jpg">http://upload.wikimedia.org/wikipedia/commons/b/b9/D%C3%BCrer-_Rhinoceros.jpg
如果我点击太快就会发生这种情况.是的,已经看过这个错误报告：http://code.google.com/p/fbug/issues/detail?id=4291
任何想法为什么会发生这种情况以及如何解决这个问题？因为我不能忽视这些错误.它们干扰了我的功能.
我的代码：
<!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>
解决方法
试试这个：
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;
}
};
每当您单击图像时,它会暂时禁用单击处理程序,然后在图像加载完成后重新启用它.
