JQuery - 檢查IMG src是否有效

Question

是否可以使用jquery檢查img src是否有效？

我們擁有一個擁有數百篇新聞文章的動態站點 - 其中大部分都包含圖片 - 基本上屬於後端錯誤，即使當前沒有圖片顯示圖片div - 這會導致我們幾個問題。

<div class="imgBlock"> 
     <img class="newsImg" src="db/imgart/10234.jpg" /> 
    </div> 

是否有可能通過JQuery腳本檢測img src是否傳遞圖像？

Answer 1

function IsValidImageUrl(url) { 
$("<img>", { 
    src: url, 
    error: function() { alert(url + ': ' + false); }, 
    load: function() { alert(url + ': ' + true); } 
}); 
} 

Answer 2

使用錯誤handler這樣的：

$(".newsImg").error(function() { 
    alert("No image"); 
}); 

或者

var image = new Image(); 
image.src = "db/imgart/10234.jpg"; 
if (image.width == 0) { 
    alert("No image"); 
} 

Answer 3

使用簡單的CSS：

<style type="text/css"> 
    .hidden { 
    display: none; 
    { 
    .visible { 
      display: block; 
    } 
    </style> 

然後腳本

var imgDiv = document.getElementById('img1'); //your div id 
    var imgsrc = "db/imgart/10234.jpg"; //or document.getElementById(img1).getElementsByTagName('img'); 

    var img = new Image(); 

    img.onerror = function (evt){ 
    alert(this.src + " can't be loaded."); 
    //hide <div> 
    imgDiv.setAttribute('class', 'hidden'); 

    } 
    img.onload = function (evt){ 
    alert(this.src + " is loaded."); 
    //show div 
    imgDiv.setAttribute('class', 'visible'); 
    } 

    img.src = imgsrc;