Changing an image src attribute with jQuery not always applied in Chrome/Opera

Question

I have the following bit of code which is used to retrieve a small high-res portion of a photo on my website. The idea being to let people have a glimpse at the original's quality before deciding whether to purchase or not:

$('#magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() {
    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
});

For some reason, it's intermittent. Fiddler shows that the snippet is always loaded, but it's only displayed sometimes. Even when it doesn't display though, the code in the load() event runs just fine.

So it thinks it's loaded, Fiddler shows that it's loaded, but about 50% of the time it doesn't actually display where it should.

It tends to happen less on my desktop at home, and more on my laptop when I'm out and about, so I wonder if it's somehow related to the resource being a bit slow loading at times...?

Any ideas?

edit: this actually appears to limited to Chrome & Opera, it works fine in Firefox/IE11

Answer 1

edited to show that this doesn't work...

It seemed at first that a pragmatic "solution" was to remove and re-add the image:

<div id="magviewholder"><img id="magviewplus" src="pixel.gif" alt=""></div>

Like so:

$('#magviewholder').children("img").remove()
$('#magviewholder').append('<img>');

$('#magviewholder>img').attr('onerror','imgError(this)').attr('id','magviewplus').attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top).load(function() {
     window.clearInterval(maginterval);
     magtimer=3;
     maginterval=window.setInterval(magViewCountdown,1000);
     $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
 });

This appeared to work in all browsers at first, but seems to be just as intermittent now...

Answer 2

Looks like your issue is well-documented as is evident from the following posts:

1. jquery callback on image load when changing the src

2. Capturing load event for images dynamically changing their source

3. jQuery callback on image load (even when the image is cached)

I would suggest you load a new image into memory, then when this new image's load event fires, change the src of the actual image and do whatever else needs to be done. The original image remains intact and any other events (other than load) attached to it should remain intact:

$(new Image()).attr('src', '/photos/original-snippet.php?id=<?php echo $nID?>&x=' + left + '&y=' + top).load(function() {
    $('#magviewplus').attr('src', this.src);
    window.clearInterval(maginterval);
    magtimer = 3;
    maginterval = window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in ' + magtimer + 's...');
});

DEMO

Answer 3

You can use Image onload event.

This event handler will be called on the image element when the image has finished loading.

Code

var url = '/photos/original-snippet.php?id=<?php echo $nID?>&x='+left+'&y='+top;

var img = new Image();

img.onload = function () { 
    //When load's sucessfully
    $('#magviewplus').prop('src', url); 

    window.clearInterval(maginterval);
    magtimer=3;
    maginterval=window.setInterval(magViewCountdown,1000);
    $('#clicktoenhance').html('Exiting in '+magtimer+'s...');
};

img.onerror = function () { 
    //When load's fails
}; 

img.src = url; //Set URL