Javascript 即使src无效，也要更改src

我有这样简单的图像：

<script>
    function Change() {
        $("#ddd").prop("src", "/someOtherImage.jpg"); <!-- valid image -->
    }
</script>

<script>
    $(function() {
        $("#ddd").on("load", function() {
            alert("changed");
        });
    });
</script>

<script>
    function Change1() {
        $("#ddd").prop("src", "/savsavsa.jpg"); <!-- invalid image -->
    }
</script>

现在单击按钮，我将其更改为：

<script>
    function Change() {
        $("#ddd").prop("src", "/someOtherImage.jpg"); <!-- valid image -->
    }
</script>

<script>
    $(function() {
        $("#ddd").on("load", function() {
            alert("changed");
        });
    });
</script>

<script>
    function Change1() {
        $("#ddd").prop("src", "/savsavsa.jpg"); <!-- invalid image -->
    }
</script>

函数更改（）{
$（“#ddd”）.prop（“src”，“someOtherImage.jpg”）；
}

除此之外，当它发生这样的变化时，我会倾听：

<script>
    function Change() {
        $("#ddd").prop("src", "/someOtherImage.jpg"); <!-- valid image -->
    }
</script>

<script>
    $(function() {
        $("#ddd").on("load", function() {
            alert("changed");
        });
    });
</script>

<script>
    function Change1() {
        $("#ddd").prop("src", "/savsavsa.jpg"); <!-- invalid image -->
    }
</script>

$（函数（）{
$（“#ddd”）。在（“加载”，函数（）上）{
警报（“变更”）；
});
});

像这样，它可以工作，但当我将其设置为无效图像时，它不工作，如下所示：

<script>
    function Change() {
        $("#ddd").prop("src", "/someOtherImage.jpg"); <!-- valid image -->
    }
</script>

<script>
    $(function() {
        $("#ddd").on("load", function() {
            alert("changed");
        });
    });
</script>

<script>
    function Change1() {
        $("#ddd").prop("src", "/savsavsa.jpg"); <!-- invalid image -->
    }
</script>

函数Change1（）{
美元（“#ddd”）.prop（“src”，“/savsa.jpg”）；
}

或

函数Change1（）{
美元（“#ddd”）.prop（“src”，“无”）；
}

或

函数Change1（）{
美元（“#ddd”）.prop（“src”，“#”）；
}

---

在上述三种切换中，它都不会触发

load

事件。我尝试了

change

事件，但也不起作用。当我检查

img

时，它确实发生了变化

加载事件是在图像加载时触发的，而不是在
src
发生变化时触发的

如果将src更改为无法成功加载图像的内容，则自然不会出现
load
事件

请改为尝试
错误
事件。
在大多数情况下，如果图像源指向无效资源，将触发
错误
事件，因此您可以使用：

函数srcChangedListener（）{
警报（“变更”）；
}
$（函数（）{
$（“#ddd”）。在（“加载”，srcChangedListener）；
$（“#ddd”）。在（“错误”，srcChangedListener）；
});

但是这些事件只有在从服务器获取资源后才会触发。如果您想要更快的方法，请使用
MutationObserver
在无效图像上侦听
load
事件没有意义。因为没有图像，所以不会有
load
事件

如果您主要希望检查src属性更改，则可以触发自定义事件：

var imgSrc = null;
$(function(){
  var imageSrc = $('#ddd').attr('src');
  if (imageSrc != imgSrc) {
   $('#ddd').trigger('srcChange');
  }
})

// listen for the change:
$('#ddd').on('srcChange', function() {
  console.log('src changed');
});

如果要在发生时检查src属性更改，则可以将旧值存储在localStorage中，并使用该值检查更改，或者通过在间隔时触发来检查更改