Question

我试图用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')
  }
});

Answer 1

你在这行v.src = x.replace('500x375', '130x98'):中缺少分号吗？

尝试将alert();函数放在您怀疑的行中... 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');
       };

Answer 2

您可以尝试此代码

$(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

Answer 3

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

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

如果加载图片时出错，则会触发此图像。

您可能还希望在我们第一次运行时取消绑定此事件，以防它连续循环。

检查负载变化src上是否不存在图像

3 个答案: