圖像損壞或在firefox截斷

我的代碼如下（以及在這裏：http://jsbin.com/oseruc/1）在每次點擊鼠標時翻轉給定的圖像。它可以在所有瀏覽器上正常運行，除了最新的Firefox以外。 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>

來源

2012-07-30 akonsu

對你不知道，它在FF 5中的工作正如我所預期的那樣。某些版本特定的錯誤可能是，代碼沒有問題。 – SexyBeast 2012-07-30 18:22:32

@Cupidvogel，謝謝。我正在運行版本14.0.1。它通常會在頁面刷新後最初顯示的第一張圖像上點擊過快。之後，它似乎工作正常。顯然這是Firefox中的一個錯誤，但我需要弄清楚如何繞過它。 – akonsu 2012-07-30 18:25:41

我也可以重現它。 – Pointy 2012-07-30 18:28:07

試試這個：

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-15 05:12:10 Barmar

當用戶請求一個圖像太快這肯定會發生。我通過使用setTimeout來了解它是否在過去的35ms內被請求過。我的應用程序有點不同，但你可以做這樣的事情（或者只是在圖像加載之前關閉按鈕）。

來源

2012-10-15 04:07:02

我有完全相同的問題，它影響所有瀏覽器firefox，鉻和即不只是Firefox，但只是Firefox顯示錯誤消息「圖像損壞或截斷」在CONSOL日誌。這個問題只發生在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); 
     } 
    }); 
}

我的代碼中的衝突發生在fadeIn和fadeOut之間。 fadeout需要300ms，如果ajax請求發生的速度超過300ms，它將顯示消息和ajax響應數據不會正確顯示。解決方法是使用延遲（）成功功能。我推遲了淡入爲310ms，以防萬一:)

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-04 04:56:38 razzak

我沒有做任何Ajax請求，我看到相同的錯誤信息。 – thinsoldier 2014-10-09 16:22:22

我知道這是舊的，但對於其他人誰碰到這個檢查絆倒，並確保該文件實際上沒有損壞。在瀏覽了其中的幾個解決方案之後，我讓我的設計師重新創建圖像。一旦他上傳了它，一切都開始按預期工作。

來源

2016-06-23 19:05:05 kjw

圖像損壞或在firefox截斷

回答

相關問題