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だけに影響を及ぼしていたのとまったく同じ問題を抱えていましたが、コンソールログに「画像が破損または切り捨てられました」というエラーメッセージが表示されていました。この問題は、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応答データが正しく表示されないことが示されます。解決策は、success関数で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 に答える