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...