$('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>
答案 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)
答案 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');
});