JQuery - 检查 IMG src 是否有效答案

【问题标题】：JQuery - Check to see if an IMG src is validJQuery - 检查 IMG src 是否有效
【发布时间】：2015-02-26 10:53:41
【问题描述】：

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

我们有一个动态网站，其中包含数百篇新闻文章 - 其中大部分包含图片 - 基本上存在后端错误，即使当前没有图片，图片 div 也会显示 - 这导致我们问题。

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

是否可以通过 JQuery 脚本检测 img src 是否正在传递图像？

【问题讨论】：

您应该在整个页面加载完成后在文档末尾执行此检查。
看看这个链接：stackoverflow.com/questions/3381663/…

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案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");
}

【讨论】：

【解决方案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;

【讨论】：