6

我下面的代码（以及这里：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
如果我点击太快，就会发生这种情况。是的，已经看到了这个错误报告：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>

4

4 回答 4

5

当您请求图像太快时，肯定会发生这种情况。我通过使用 setTimeout 查看是否在过去 35 毫秒内请求了图像来解决它。我的应用程序有点不同，但你可以做类似的事情（或者在加载图像之前禁用按钮）。

于 2012-10-15T04:07:02.410 回答
3

我遇到了完全相同的问题，它影响了所有浏览器 firefox、chrome，即不仅仅是 firefox，只有 firefox在 consol 日志中显示错误消息“图像损坏或截断”。只有当 ajax 请求发生得太快导致 beforeSend 函数和 success 函数之间发生冲突时，才会出现该问题。这是我的代码：

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

我的代码中的冲突发生在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);
        }
    });
}
于 2013-02-04T04:56:38.867 回答
1

尝试这个：

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

每当您单击图像时，它会暂时禁用单击处理程序，然后在图像完成加载时重新启用它。

于 2012-10-15T05:12:10.080 回答
1

我知道这是旧的，但对于任何偶然发现此检查并确保文件实际上没有损坏的人。在浏览了其中几个解决方案后，我要求我的设计师重新创建图像。一旦他上传它，一切都开始按预期工作。

于 2016-06-23T19:05:05.487 回答