用JavaScript處理頁面圖檔失效

2008-08-30

7298
0
jQuery
2008-11-16

用JavaScript處理頁面圖檔失效失連等情況發生

那天我在做前公司PM的一個專案

該網站現在已經上線了有興趣的可以連過去看

這案子cloudio只負責做前台網址是http://www.lexuscpo.com.tw/

因為認真的PM希望能處理圖檔失效的問題

不希望使用者看到網頁上有叉燒包或是FF的"破圖"

所以要求cloudio要檢查圖檔是否存在

當時cloudio第一個想到的做法就是在server端先檢查圖片是否存在

所以就要靠asp的FileSystemObject囉

因為考慮的是server端檢查所以在ASP.NET就用fileinfo去檢查就好了

可是仔細想想這樣好像蠻耗效能的

如果有50張圖

那不就要建立完fso後跑50次判斷式嗎?

如果有圖就秀原本的圖

如果圖片失效就秀預設圖

這樣會不會太沒效率了...

cloudio第一個想到的替代做法就是在client用JavaScript去判斷該圖片是否失連

如果失連的話就用JavaScript換另一張圖片上來

可是一時之間還真的不知道JavaScript有什麼方法可以檢查圖片失連

判斷src有沒有值也不對

因為很有可能src還是有從資料庫抓到值只是該圖片的實體被不小心刪掉了

導致頁面讀取不到

那用JavaScript去讀Server端有沒有那個檔案嗎?

JavaScript基於安全性是不能讀取檔案系統的不是嗎?

而且真的要讀的話檔案是在Server端那不是要用AJAX嗎?

後來在翻cloudio的JavaScript的參考辭典讓我找到了個onerror的方法

基本上就是寫在onError事件中


<img src="../images/deletee.gif" onError="this.src='../images/delete.gif';" />

這樣就輕鬆解決了

但是目前的問題是頁面中不止一張圖片

而且cloudio習慣已經有在頁面上加上jQuery了

所以還是用jQuery寫囉:P


<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery(".smallPicture").error(function(e) {
            //圖片失連
            jQuery(e.target).attr("src", "../images/delete.gif");
        })
    })
</script>

然後cloudio將所有小張的圖片都用smallPicture的樣式

在jQuery中一口氣將所有樣式是smallPicture都檢查並換上尺寸合適的預設圖片

回首頁