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

У меня есть следующий бит кода, который используется для извлечения небольшой фотографии с высоким разрешением фотографии на моем веб-сайте. Идея состоит в том, чтобы позволить людям увидеть первоначальное качество, прежде чем принимать решение о покупке или нет:

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

По какой-то причине он прерывистый. Fiddler показывает, что фрагмент всегда загружен, но он отображается только иногда. Даже если он не отображается, код в событии load() выполняется просто отлично.

Итак, он думает, что он загружен, Fiddler показывает, что он загружен, но примерно в 50% случаев он фактически не показывает, где он должен.

Как правило, на моем рабочем столе меньше, и больше на моем ноутбуке, когда я ухожу, и поэтому я задаюсь вопросом, так ли это как-то связано с тем, что ресурс немного медленнее загружается порой...?

Любые идеи?

edit: это фактически ограничивается Chrome и Opera, отлично работает в Firefox/IE11

Ответ 1

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

Я бы посоветовал вам загрузить новое изображение в память, а затем, когда это событие загрузки нового изображения срабатывает, измените 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...');
});

DEMO

Ответ 2

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

Сначала казалось, что прагматичным "решением" было удаление и повторное добавление изображения:

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

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

Ответ 3

Вы можете использовать Image onload событие.

Этот обработчик события будет вызван в элементе изображения, когда изображение закончит загрузку.

код

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

var img = new Image();

img.onload = function () { 
    //When load 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 fails
}; 

img.src = url; //Set URL

Ответ 4

Используйте .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...');
});

Ответ 5

Проблема может быть связана с политикой кэширования клиентских ресурсов, которая зависит от браузера и его настроек. Если это так, вы можете принудительно перезагрузить изображение, добавив случайное число в качестве параметра в строку адреса. С точки зрения сервера этот параметр не имеет смысла, но браузер видит его как совершенно новый ресурс, даже на самом деле он тот же. Ниже пример иллюстрирует этот метод:

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

Попробуйте поместить свойство "name" в тег с тем же значением, что и свойство id.

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

таким образом jquery даже в chrome обнаруживает атрибут и правильно изменяется, в olders versión jquery я игнорирую, если это работает, надеюсь, что эта помощь