Обнаружить изменение IMG SRC

Я пытаюсь определить, изменился ли источник изображения.

В моем случае src изменен с jquery, и я не имею права изменять файл jquery. Поэтому я пытаюсь обнаружить изменение src из элемента img.

Я хотел бы видеть источник, если src изменен, только для тестирования

Это мой текущий код:

var divimg = document.getElementById("img_div");
divimg.onchange = alert(divimg.getElementsByTagName('img')[0].src);

На странице загрузки оповещения реагируют и показывают мне src, но не на src, меняют с jquery

 a.tereschenkov18 мая 2012 г., 17:37
Пожалуйста, прочитайтеstackoverflow.com/questions/4561845/…

Ответы на вопрос(6)

var img = document.querySelector("#img_div img"),
observer = new MutationObserver((changes) => {
  changes.forEach(change => {
      if(change.attributeName.includes('src')){
        console.dir(img.src);
      }
  });
});
observer.observe(img, {attributes : true});
 21 нояб. 2018 г., 19:38
Это должен быть принятый ответ, теперь его метод наблюдателя - путь!

src Атрибут изменен, браузер немедленно отключится и загрузит изображение. Как только изображение возвращается в браузер, браузер активируетloaded событие на элемент изображения. Таким образом, вы можете эффективно контролироватьsrc изменение путем установки обратного вызова для этого события. Вы можете сделать что-то похожее на следующий пример кода.

var img = $("<img />");
img.load(function() { console.log("loaded"); });
img.attr("src", "http://static.adzerk.net/Advertisers/ecc536e9e1204b7faccb15621f27d7bc.jpg");

однако это будет поддерживаться только новыми браузерами, которые реализуютСобытия мутации DOM...

divimg.addEventListener("DOMAttrModified", function(event) {
    if (event.attrName == "src") {
       // The `src` attribute changed!
    }
});

Analysis

load event is triggered when src attribute of <img /> is changed or set

If user didn't write src attribute in <img />, browser will fill out src attribute automatically (such as data:image/png;base64,...) to prevent 204 Error. This will also trigger load event.

Conclusion

Basically use load event, but check whether it is default image or not. (Probably, default image would be 1 x 1 pixel)

Assumption - your image is bigger than 1 x 1 pixel

Solution

$('img').load(function() {
    var imageObj = $(this);
    if (!(imageObj.width() == 1 && imageObj.height() == 1)) {
        console.log('Image source changed');
    }
});

что для этого нет события, вы можете создать свое собственное «событие»:

var divimg = document.getElementById("img_div"),
    prevSrc;
setInterval(function() {
    if (divimg.src != prevSrc) {
        prevSrc = divimg.src;
        onSrcChange();
    }
}, 1000); // 1000ms = 1s

function onSrcChange() {
    // do something
}
 24 июл. 2014 г., 18:31
Имейте в виду, это решение опрашивает, чтобы увидеть,src Атрибут меняется каждую 1 секунду. Это кажется очень дорогим! Я не могу поверить, что решение для опроса - хорошая идея.

DOMAttrModified может сработать, понятия не имею ... но onload для меня определенно работает. Вот скрипка с демо.http://jsfiddle.net/QVqhz/

 22 янв. 2015 г., 10:05
Почти 3 года спустя, но это работает очень хорошо, спасибо!
 07 окт. 2015 г., 00:59
В соответствии сdeveloper.mozilla.org/en-US/docs/Web/Guide/Events/… этот метод устарел и может привести к тому, что ваш сайт перестанет работать, так как эта функция была удалена из стандарта.

Ваш ответ на вопрос