jQuery的/ JavaScript的檢查圖像存在，並且糾正它

Question

下面給出

http://www.vbarter.com/images/content/3/2/32822.JPG（負載） http://www.vbarter.com/images/content/3/2/32784.png（負載）

http://www.bikewalls.com/pictures/abc.jpg（不加載）

我需要一個javascript 3圖像URL/jquery函數/代碼自動更改工作的擴展。以上例爲例，將會非常有幫助。這裏是我的代碼片段：

function imgError(image) { 

image.onerror = ""; 
var image_src=image.src.substring(0, image.src.length-3); 
image.src = image_src+"png"; 
$.ajax({ 
    type: "HEAD", 
    url: image.src, //or your url 
    success: function(data){ 
    }, 
    error: function(data){ 
     image.src = image_src+"JPG"; 
      $.ajax({ 
    type: "HEAD", 
    url: image.src, //or your url 
    success: function(data){ 
    }, 
    error: function(data){ 
     alert("image fails"); 

    }, 
     }); 
    }, 
}); 
return true; 
} 

HTML part 
<img src="above url" onerror="imgError(this);"> 

考慮情況圖片src是vbarter.com/images/content/3/2/32822.jpg。在內部ajax函數內部，它進入錯誤部分並提示「圖像失敗」。但存在vbarter.com/images/content/3/2/32822.JPG。

Answer 1

其實你的代碼是正確的，但使用AJAX上的jsfiddle網站

我已修改了的jsfiddle例如，改變圖像源是在相同的圖像問題是由於跨域請求問題域。你會發現結果與你所期望的相同。

<div style="background-color:black;"> 
    <img src="http://fiddle.jshell.net/img/logo.jpg" onerror="imgError(this);" /> 
</div> 

<script> 
function imgError(image) { 
    image.onerror = ""; 
    var image_src=image.src.substring(0, image.src.length-3); 
    image.src = image_src+"jpg"; 
    $.ajax({ 
     type: "HEAD", 
     url: image.src, //or your url 
     success: function(data){ 
      alert("png sucess"); 
     }, 
     error: function(data){ 
      image.src = image_src+"png"; 
      .ajax({ 
       type: "HEAD", 
       url: image.src, //or your url 
       success: function(data){ 
        alert("JPG success"); 
       }, 
       error: function(data){ 
        alert("JPG fails"); 

       }, 
      }); 
     } 
    }); 
    return true; 
} 
</script> 

http://jsfiddle.net/ceN8R/6/