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;

JQuery - 检查IMG src是否有效

3 个答案: