在src上更改，即使src无效。

Question

我有这样简单的形象：

<img id="ddd" src="/someimage.jpg" /> <!-- valid image -->

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

<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 Change1() {
        $("#ddd").prop("src", "none"); <!-- invalid image -->
    }
</script>

或

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

在上述3种情况下，它都不会触发load事件。我试过使用change事件，但也不起作用。当我检查那个img 时，它确实改变了。

Answer 1

在大多数情况下，如果图像源指向无效资源，则会触发error事件，因此可以使用：

function srcChangedListener() {
    alert("changed");
}
$(function() {
    $("#ddd").on("load", srcChangedListener);
    $("#ddd").on("error", srcChangedListener);
});

但是，这些事件只有在从服务器获取资源之后才会触发。如果您想要更快的方法，请使用MutationObserver。

Answer 2

load事件是在图像加载时触发的，而不是在更改src时触发的。

如果您将src更改为不能成功加载图像的内容，那么没有load事件是很自然的。

转而尝试error事件。

Answer 3

在无效图像上侦听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中，并使用该值检查更改，或通过触发间隔检查更改。