是否可以使用jquery检查img src是否有效?
我们有一个动态网站,里面有数百篇新闻文章,其中大部分都包含图像,基本上有一个后端错误,即使目前没有图像,也会显示图像div,这给我们带来了一些问题。
<div class="imgBlock">
<img class="newsImg" src="db/imgart/10234.jpg" />
</div>
是否可以通过JQuery脚本检测img src是否正在传递图像?
function IsValidImageUrl(url) {
$("<img>", {
src: url,
error: function() { alert(url + ': ' + false); },
load: function() { alert(url + ': ' + true); }
});
}
使用如下错误处理程序:
$(".newsImg").error(function() {
alert("No image");
});
或
var image = new Image();
image.src = "db/imgart/10234.jpg";
if (image.width == 0) {
alert("No image");
}
使用简单的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;