Событие изменения jquery, когда изменяется изображение src 

$('img.product_image').attr('src').change(function() {
    alert($('img.product_image').attr('src'));
});

Привет ya'll

Я пытаюсь написать код, который будет предупреждать img.product_image, когда изменяется src, но когда я запускаю свою страницу и нажимаю кнопку, чтобы изменить изображение src, предупреждение не появляется... это мой синтаксис не так?

вот изображение:

<img class="product_image colorbox-1160" id="product_image_1160" alt="Black Onyx Ring" title="Black Onyx Ring" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" width="400">

и изображение src изменится, когда я нажму на один из этих миниатюр:

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162.jpg" class="thickbox cboxElement" rel="Black Onyx Ring" href="#" onclick="location.href='https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162.jpg'; return false;" title="DSC_0162">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="DSC_0162" title="DSC_0162">
    </a>
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1.jpg" class="thickbox cboxElement" rel="Black Onyx Ring" href="#" onclick="location.href='https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1.jpg'; return false;" title="Black Onyx Ring">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="Black Onyx Ring" title="Black Onyx Ring">
    </a>
    <a rev="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" class="thickbox" rel="Black Onyx Ring" href="#" onclick="location.href='https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg'; return false;" title="Black Onyx Ring">
        <img width="50" height="50" src="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring-50x50.jpg" class="attachment-gold-thumbnails colorbox-1160 " alt="Black Onyx Ring" title="Black Onyx Ring">
    </a>
</div>

Ответы

Ответ 1

В этом случае вы можете использовать событие .load:

$('img.product_image').on('load', function () {
 alert($('img.product_image').attr('src'));
});

Ответ 2

Этот код должен работать более надежно, чем ответы, которые используют "load":

// ensures this works for some older browsers
MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

// the element you want to observe. change the selector to fit your use case
var img = document.querySelector('img.product_image')

new MutationObserver(function onSrcChange(){
  // src attribute just changed!!! put code here
  alert($('img.product_image').attr('src'))
})
  .observe(img,{attributes:true,attributeFilter:["src"]})

В то время как некоторые ответы, которые используют событие load, могут работать большую часть времени, событие загрузки запускается после завершения загрузки src. Это событие может быть отложено, если загрузка занимает некоторое время или она может не срабатывать, если есть проблема при загрузке (что происходит, если время ожидания изображения или когда вы устанавливаете src на изображение, которое не существует или является недопустимым, например, пустым строка).

BTW jQuery не требуется, но если вы действительно хотите его использовать, вы можете получить целевой элемент img следующим образом:

var img = $('img.product_image').get(0)

Ответ 3

Вы можете использовать событие загрузки, если вам нравится

$("img.product_image").load(function(){
     alert("New image loaded");
});

Jsfiddle здесь

Ответ 4

Если я правильно понял ваш вопрос, попробуйте следующее:

Скажем, ваш HTML-код выглядит примерно так:

<img class="product_image" src="first.png">

Вы можете получить attr() с помощью jQuery следующим образом:

$(".product_image").attr("src","second.png");

а затем с помощью кнопок вы загружаете функцию щелчка, например:

$('yourButtons').click(function() {
    $('.product_image').attr('src','second.jpg');
});