Промяната на src атрибут на изображение с jQuery не винаги се прилага в Chrome/Opera

Изглежда, че проблемът ви е добре документиран, както е видно от следните публикации:

1. обратно извикване на jquery при зареждане на изображение при промяна на src

2. Заснемане на събитие за зареждане за изображения, динамично променящи своя източник

3. jQuery обратно извикване при зареждане на изображение (дори когато изображението се кешира)

Предлагам ви да заредите ново изображение в паметта, а след това, когато се задейства събитието за зареждане на това ново изображение, да промените src на действителното изображение и да направите всичко, което трябва да се направи. Оригиналното изображение остава непокътнато и всички други събития (освен зареждане), прикачени към него, трябва да останат непокътнати:

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

ДЕМО

редактирано, за да покаже, че това не работи...

Първоначално изглеждаше, че прагматичното „решение“ е да се премахне и добави отново изображението:

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

Така:

$('#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...');
 });

Първоначално изглеждаше, че работи във всички браузъри, но сега изглежда също толкова периодично...

Можете да използвате Image onload< /a> събитие.

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

Използвайте .load(), за да заредите изображението:

$('#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...');
});

Проблемът може да е свързан с политиката за кеширане на клиентските ресурси, която зависи от браузъра и неговите настройки. Ако е така, можете да принудите изображението да се презареди, като добавите произволно число като параметър към адресния низ. От гледна точка на сървъра този параметър е безсмислен, но за браузъра го вижда като напълно нов ресурс, въпреки че всъщност е същият. Примерът по-долу илюстрира този метод:

$('#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>

Опитайте се да поставите свойството "name" в тага със същата стойност като свойството "id".

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

по този начин jquery дори в chrome открива атрибута и се променя правилно, в по-старата версия на jquery игнорирам, ако това работи, надявам се това да помогне