插入图像使用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>