插入圖像使用jQuery - 檢查圖像爲JPG或PNG

Question

我有一個看起來像這樣的列表：

<ul> 
    <li>nameID0001</li> 
    <li>nameID0002</li> 
    <li>nameID0003</li> 
    <li>nameID0004</li> 
</ul> 

我知道有與該名稱相關聯的照片。它是'nameID0001.jpg'或'nameID0001.png'。

我想的名字後，插入圖片：

$('ul li').each(function() { 
    var nameID = $(this).text(); 
    $(this).append('<img src="/images/' + nameID + '.jpg" alt="" />'); 
}); 

如何識別文件是否存在以及是否有一個JPG或PNG擴展。

如果不存在，插入'default.jpg'，否則插入適當的擴展名。

Answer 1

嘗試使用javascript更改img src，而遠程圖像文件不存在。

一個的onError添加到IMG節點：

<IMG src="http://www.baidu.com/img/baidu_logo.gif" onerror="javascript:this.src='/images/logo.jpg'"> 

此代碼爲我工作：檢查的圖像在JavaScript加載（沒有錯誤）

<ul> 
    <li>nameID0001</li> 
    <li>nameID0002</li> 
    <li>nameID0003</li> 
    <li>nameID0004</li> 
</ul> 

<script type="text/javascript"> 

    function changesrc(obj, nameID1) { 
     var src1 = obj.src.replace(".jpg", ".png"); 
     //ignore error while .png file not exist 
     if(src1 == obj.src) return; 
     obj.src = src1; 
    } 

    $('ul li').each(function() { 
     var nameID = $(this).text(); 
     $(this).append('<img src="/images/' + nameID + '.jpg" onerror="javascript:changesrc(this);" />'); 
    }); 

</script>