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

问题

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

回答1:

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

jquery callback on image load when changing the src
Capturing load event for images dynamically changing their source
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

回答2:

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

回答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

回答4:

Use .load() to load the image:

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

回答5:

The problem may be related to the client resource caching policy which depends on the browser and its settings. If so, you can force the image reload by appending a random number as parameter to the address string. From the server point of view this parameter is meaningless, but for the browser sees it as a completely new resource, even actually it's the same. Below sample illustrates this method:

$('#loadbtn').click(function(){
  $('#msg').html("loading...");
  $('#myimg').attr("src", "http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1" + 
    "&rnd=" + Math.random());
});

$('#myimg').load(function(){
  $('#msg').html("loaded");
});

#loadbtn {
  margin: 16px;
}
#msg {
  margin: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id='myimg' src='http://cache1.asset-cache.net/xt/165920320.jpg?v=1&g=fs1%7C0%7CISI%7C20%7C320&s=1' />
<div>
  <input type=button id='loadbtn' value='reload' />
</div>
<div id='msg'>loading...</div>

回答6:

Try to put de "name" property in the tag with the same value like the "id" property.

<id="magviewplus" name="magviewplus".../>

in this way jquery even in chrome detects the atribute and change correctly, in the olders versión of jquery i ignore if this works, hope this help

来源：https://stackoverflow.com/questions/29508382/changing-an-image-src-attribute-with-jquery-not-always-applied-in-chrome-opera

标签

jquery

image

src