图像 src 更改时的 jquery 更改事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21163954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery change event when image src changes
提问by user1269625
$('img.product_image').attr('src').change(function() {
alert($('img.product_image').attr('src'));
});
Hi ya'll
你好
I am trying to write some code that will alert the img.product_image when the src changes, but when I run my page and click a button to change the image src, the alert does not come up...is my syntax wrong?
我正在尝试编写一些代码，当 src 更改时会向 img.product_image 发出警报，但是当我运行我的页面并单击按钮更改图像 src 时，警报没有出现......我的语法错误吗？
here is the image:
这是图像：
<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">
and the image src would change when I would click on one of these thumbnails:
当我单击这些缩略图之一时，图像 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>
回答by Milind Anantwar
You can use .loadevent in this case:
.load在这种情况下，您可以使用事件：
$('img.product_image').on('load', function () {
alert($('img.product_image').attr('src'));
});
回答by mattr
This code should work more reliably than answers that use '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"]})
While some answers that use the 'load' event may work most of the time, the load event fires after the 'src' finishes downloading. That event may be delayed if the download takes a while or it may never fire if there is an issue downloading (which happens if the image times out or when you set src to an image that doesn't exist or is invalid, like an empty string ).
虽然一些使用 'load' 事件的答案可能在大部分时间都有效，但在 'src' 完成下载后会触发 load 事件。如果下载需要一段时间，该事件可能会延迟，或者如果下载出现问题，它可能永远不会触发（如果图像超时或将 src 设置为不存在或无效的图像，例如空图像，则会发生这种情况细绳 ）。
BTW jQuery isnt required but if you really want to use it you can get the target img element like so:
BTW jQuery 不是必需的，但如果你真的想使用它，你可以像这样获得目标 img 元素：
var img = $('img.product_image').get(0)
回答by Nouphal.M
回答by appostolis
If I understood your question right, try this:
如果我理解你的问题是正确的，试试这个：
Let's say your HTML is something like this:
假设您的 HTML 是这样的：
<img class="product_image" src="first.png">
You can get the attr() with jQuery like this:
您可以像这样使用 jQuery 获取 attr()：
$(".product_image").attr("src","second.png");
and then using your buttons you load a click function like:
然后使用您的按钮加载一个点击功能，如：
$('yourButtons').click(function() {
$('.product_image').attr('src','second.jpg');
});
