Question

I’m currently using the following function to set a timeout inside of a change event for a HTML select option…

jQuery(function($) {
var mselect = $("#myselect");
mselect.live('change',function () {
window.setTimeout(function () {
console.log("the new value is now: "+nextQuery(".nextSKU").text());
},3000);
});
});

I’m pretty much writting out a sku number for an item every time my select option changes, and a setTimeOut for a delay effect. But how can I replace my setTimeOut for something more efficient…meaning, I want to execute console.log(….), when the src of my product image updates. How can I do this if my image element looks like this…

<img id="imgLargeImageImage" class="nextProdImage" itemprop="image" src="http://.../.../.../SHT-GD-M-SM1.jpg" alt="Gold Shirt">

When the image changes based on the select you choose, the < img > tag will change the src like this…

<img id="imgLargeImageImage" class="nextProdImage" itemprop="image" src="http://.../.../.../SHT-GD-N-394.jpg" alt="BLUE Shirt">

Thanks for any advice!

Answer 1

I want to execute console.log(….), when the src of my product image updates.

Then you would want to bind the actual log call on the image load.

$('img.nextProdImage').load(function (e) {
   console.log("the new value is now: "+nextQuery(".nextSKU").text());
});
$("#myselect").live('change', function (e) {
   // set the new image src based on the selected SKU
});

The only caveat here is that you need to make youre getting the correct SKU to log. Im not sure what the next SKU is though or how its stored, but you might look into stashing this in data attributes. I would also move itemprop to a data attribute instead of using a custom prop like that:

<img id="imgLargeImageImage" class="nextProdImage" data-itemprop="image" data-sku="SHT-GD-N-394" src="http://.../.../.../SHT-GD-N-394.jpg" alt="BLUE Shirt" />