当图像src改变时,jquery改变事件

时间:2014-01-16 14:05:08

标签: jquery html

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

你好吗

我正在尝试编写一些代码,当src更改时会提醒img.product_image,但是当我运行页面并单击按钮更改图像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="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/DSC_0162.jpg" 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="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring1.jpg" 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="https://www.taranmarlowjewelry.com/wp-content/uploads/2012/10/Black-Onyx-Ring.jpg" 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>

4 个答案:

答案 0 :(得分:23)

在这种情况下,您可以使用.load事件:

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

答案 1 :(得分:3)

此代码应该比使用“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'完成下载后会触发load事件。如果下载需要一段时间,则可能会延迟该事件;如果下载有问题,则可能永远不会触发该事件(如果图像超时或将src设置为不存在或无效的图像时会发生此事件,例如空字符串)。

BTW jQuery不是必需的,但是如果你真的想要使用它,你可以像这样得到目标img元素:

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

答案 2 :(得分:2)

如果您愿意,可以使用加载事件

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

Jsfiddle here

答案 3 :(得分:0)

如果我理解你的问题,请试试:

假设你的HTML是这样的:

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

您可以使用jQuery获取attr():

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

然后使用按钮加载点击功能,如:

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