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

check if images not exist on load change src

本文关键字：是否 不存在 图像 src 加载 检查      更新时间：2023-09-26

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

您可以尝试此代码

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

这一行的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');
       };

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

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

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

您可能还想在第一次运行此事件时解除绑定，以防它持续循环。

相关文章：