處理破損圖像的最佳方法是什麼？

所以看起來很安靜的幾種方法來處理HTML頁面上的破碎圖像。我想知道什麼方式在流行使用，哪些方式被視爲最佳實踐？處理破損圖像的最佳方法是什麼？

要開始我已經看了一些自己喜歡：

function imgErr(source) {  
    source.src = /images/missing.jpg"; 
    source.onerror = ""; 
    return true; 
} 
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" />

優點：工作每次，該事件將永遠被抓住。用戶從未看到破碎的圖像。似乎在整個瀏覽器中運行良好。缺點：每個圖像所需的onerror標籤，功能imgErr（源）需要在頭部趕錯誤，減緩用戶遇到加載時間

$('img').error(function(){ 
    $(this).attr('src', 'missing.jpg'); 
});

優點：很少的代碼，適用於所有圖片在不改變他們的標記，可以是頭缺點以外的地方：可以錯過取決於頁onload事件的速度誤差事件，減緩用戶遇到加載時間

$(window).load(function() { 
    $("img").each(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      var src = $(this).attr("src"); 
      var suffix = src.substring(src.length - 6, src.length).split('.')[0]; 
      suffix = suffix.charAt(suffix.length - 1);    
      $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg"); 
     } 
    }); 
});

優點：可以放在任何地方在頁面上，無論何時運行，都不會影響用戶的速度s經驗加載時間缺點：顯示一個破損的圖像，直到它運行創建一個糟糕的用戶體驗

在我的情況加載時間是最大的問題，但我不能得到最後的選擇，正確地在IE中工作，因爲它改變了破並沒有破碎的圖像一樣！

乾杯，丹尼斯

來源

2010-01-12 Denis Hoctor

一個想法，它的彈簧想到的是，在你的web服務器上創建的圖像處理程序，即

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" />

忽略的aspx，顯然會被替換爲任何你首選的服務器腳本技術是。然後該處理程序可以通過爲所有未知圖像名稱提供missing.jpg來處理不存在的圖像名稱。

除此之外，您堅持使用您所提供的選項，只要我能看到。在頁面加載之前運行的任何JavaScript都無法迭代尚未收到的img標記，並且任何等待頁面準備就緒的腳本都將冒着用戶看到破碎圖像的風險。

岩石 - >您< -Hardplace

來源

2010-01-12 16:51:14 Lazarus

這個答案的變化可能讓對常見的圖像文件擴展名的ISAPI過濾器/ Apache的國防部處理的請求，這樣你就不必改變所有IMG SRC屬性指向你的處理程序。 – grenade 2010-01-12 16:55:41

我同意這一點。如果我堅決修復損壞的圖像，通用處理程序將是我的選擇。 – CeejeeB 2010-01-12 16:56:46

這可能是我選擇使用MVC的一種選擇，但我希望我可以在服務器端保持簡單！ – 2010-01-12 17:00:26

在我看來，使用alt標籤是足夠的，而且也沒有必要通過使用javascript每次檢查它添加複雜的頁面。

當然，你需要檢查每一個有一段時間，你沒有破碎的圖像。 There are tools to do it。

來源

2010-01-12 16:51:39 marcgg

如果我們沒有客戶/老闆，而且外表並非一切都不好：D – 2010-01-12 16:59:41

@marcgg不贊同。在很多情況下，佔位符圖像可以爲頁面的美學作出貢獻。例如，產品目錄可能包含許多尚未提供圖像的產品。然後，智能丟失的圖像處理程序可以用產品的正確類別替換通用產品圖像。 – grenade 2010-01-12 17:04:24

這真的很不錯... – marcgg 2010-01-12 17:04:31

理想情況下，應該只使用alt標籤。如果這是至關重要的JavaScript解決方案真的不理想，因爲如果JS關閉它不會工作。但是，你可以做一些服務器端解決方案。在PHP中的東西可以這樣做，但會需要一個數據庫或某種方式來設置變量。

<?php 
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?> 
} 
<?php else { 
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?> 
} ?> 
<?php } ?>

來源

2010-01-12 17:06:39 Chad

處理破損圖像的最佳方法是什麼？

回答

相關問題