Изменение атрибута src изображения с помощью jQuery не всегда применяется в Chrome/Opera

Похоже, ваша проблема хорошо задокументирована, как видно из следующих сообщений:

1. обратный вызов jquery при загрузке изображения при изменении источника

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

Сначала это работало во всех браузерах, но теперь, кажется, так же прерывисто...

Вы можете использовать изображение onload< /а> событие.

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 я игнорирую, если это работает, надеюсь, что это поможет