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;