检查加载更改 src 上是否不存在图像答案

【问题标题】：check if images not exist on load change src检查加载更改 src 上是否不存在图像
【发布时间】：2016-02-17 01:03:57
【问题描述】：

我正在尝试使用 javascript 将图像大小更改为 500x375 而不是 130x98。如果该图像没有 500x37，我希望它回退到 130x98。

到目前为止，我有下面的代码。它将我的图像更改为 500x375，但那些没有该尺寸的图像似乎已损坏，而不是回落到 130x98。有关如何解决此问题的任何想法？

function ImageExists(selector) {
  var imageFound = $(selector);

  if (imageFound.height() === 0) {
    console.log('no height');
    return false;
  }

  return true;
}

$('div.photo > a > img').each(function(k, v) {
  var x = v.src;
  v.src = x.replace('130x98', '500x375');

  if (!ImageExists(v)) {
    console.log(v.src);
    v.src = x.replace('500x375', '130x98')
  }
});

【问题讨论】：

提供 ImageExists 函数 .. 如果此函数返回 true 或 false .. 所以使用 if (ImageExists(v) == false)

标签： javascript jquery image url

【解决方案1】：

你可以试试这个代码

$(document).ready(function(){
    var src1 = '130x98';
    var src2 = '500x375';

    $('div.photo > a > img').each(function(){
        var changeSrc;
        var Image = $(this);
        var GetSrc = $(this).attr('src');
        Image.error(function() {
           if(GetSrc.indexOf(src1) !== -1 ){
               changeSrc = GetSrc.replace(src1 , src2);
           }else if(GetSrc.indexOf(src2) !== -1 ){
               changeSrc = GetSrc.replace(src2 , src1);
           }
           Image.attr("src", changeSrc);
        });

    })
});

DEMO

【讨论】：

@sarah 是的，它只会改变没有高度和宽度的图像 src .. 我会更新我的答案 .. 等一下
@sarah 我真的不明白你的意思..你已经有一个搜索结果页面，你可以在你的代码中使用 if 语句来渲染图像以获得你想要的图像..除非你当您将鼠标悬停在图像上时，需要 Jquery 来更改您的 img src
如果 500x375 图像不存在，我唯一的问题是让 url 变回 130x98
@sarah 经过更多时间.. 更新了答案.. 但是您的问题和代码正在寻找大小以及您需要的是在加载时检查图像.. 所以您的问题标题应该是.. 检查图像在负载变化 src 上不存在
@Mohamed-Yousef：考虑使用占位符图像，即在您的示例中：placeholdit.imgix.net/… 您不能依赖明天可能不会出现的图像。这是生成这些 URL 的站点：placehold.it ;-)

【解决方案2】：

您是否在此行的v.src = x.replace('500x375', '130x98'): 中缺少分号？？

尝试将alert();function 放在您怀疑的那一行...如果前面的任何一行出错，alert(); 将不起作用

$('div.photo > a > img').each(function (k, v) {
       var x = v.src;
       v.src = x.replace('130x98', '500x375');
       if (!ImageExists(v)) {
           console.log(v.src);
           v.src = x.replace('500x375', '130x98');
       };

【讨论】：

【解决方案3】：

如何尝试 on error 事件而不是 ImageExists 方法：

$("img").error(function () {
  //load in your default image dimensions. 
});

当加载图像出错时，将触发此操作。

您可能还想在我们第一次运行此事件时取消绑定，以防它不断循环。

【讨论】：