Обнаружение изменения 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.


javascript image onchange src
person Sporting Gool    schedule 18.05.2012    source источник
comment
Пожалуйста, прочтите stackoverflow.com/questions/4561845 /   -  person a.tereschenkov    schedule 18.05.2012

Ответы (7)


arrow_upward
8
arrow_downward

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

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

arrow_upward
7
arrow_downward

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

person Parth Thakkar    schedule 18.05.2012
comment
Согласно developer.mozilla.org/en-US/docs/ Web/Guide/Events/ этот метод устарел и может привести к тому, что ваш сайт перестанет работать, поскольку эта функция исключена из стандарта. - person Paul Stegler; 07.10.2015

arrow_upward
7
arrow_downward

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

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

arrow_upward
2
arrow_downward

Анализ

  1. load событие запускается, когда src атрибут <img /> изменяется или устанавливается

  2. Если пользователь не написал атрибут src в <img />, браузер автоматически заполнит атрибут src (например, data:image/png;base64,...), чтобы предотвратить ошибку 204. Это также вызовет событие load.

Заключение

  1. В основном используйте событие load, но проверьте, является ли это изображением по умолчанию или нет. (Вероятно, размер изображения по умолчанию будет 1 x 1 пиксель)

    • Assumption - your image is bigger than 1 x 1 pixel

Решение

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

arrow_upward
0
arrow_downward

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

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

function onSrcChange() {
    // do something
}
person Wouter J    schedule 18.05.2012
comment
Имейте в виду, что это решение опрашивает, чтобы узнать, изменился ли атрибут src каждую 1 секунду. Это кажется очень дорого! Я не могу поверить, что решение для опроса — хорошая идея. - person JonBrave; 24.07.2014

arrow_upward
0
arrow_downward

Я считаю, что jQuery всегда должен быть лучшим из-за его кросс-браузерной поддержки. Однако функция .load() устарела, начиная с jQuery 1.8.

Сегодня мы должны использовать функцию .on(), как в следующем примере:

$('img.my-image-class-name').on('load', function(){
  console.log('Hello, world');
});

Если вы попытаетесь использовать функцию .load(), ваш код просто не будет работать. Вы получите следующее сообщение об ошибке:

Uncaught TypeError: a.indexOf не является функцией

person DrupalFever    schedule 29.08.2020

arrow_upward

arrow_downward

person    schedule
comment
Это должен быть принятый ответ, теперь в 2018 году метод наблюдателя - это путь! - person user2677034; 21.11.2018