Предотвращение мерцания большого изображения при изменении src

Question

У меня проблема с изображением, мерцающим большими изображениями. В моей body у меня есть 5 изображений:

<img id="img1" src="img1.png" width="250"> 
<img id="img2" src="img2.png" width="250"> 
<img id="img3" src="img3.png" width="250"> 
<img id="img4" src="img4.png" width="250"> 
<img id="img5" src="img5.png" width="250"> 

и один я перетаскивая один из них с JQuery UI, все меняется их src и dragend, а также:

function dragStart() { 
     $('#img2').attr('src','newimg2.png'); 
     $('#img3').attr('src','newimg3.png'); 
     $('#img4').attr('src','newimg4.png'); 
     $('#img5').attr('src','newimg5.png'); } 

так хорошо, так хорошо. Но мне нужно использовать большие изображения (2000 x 2000 пикселей), потому что все изображения можно щелкнуть, а затем они будут анимироваться до полного размера окна просмотра, который они не будут пикселизовать.

$this.animate(
       { width: 1800, top: -650, left: -250 }, 

       { 
        duration: 4000, 
        easing: 'easeOutElastic' 
       }) 

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

Спасибо за ваши усилия

Answer 1

Проблема вы описали не звучит как вопрос предварительной загрузки для меня.

Для предварительной загрузки произойдет, когда вы загрузите ДРУГОЕ изображение с сервера, как только вы начнете его перемещать. Но, как я прочитал ваш вопрос, вы перемещаете объект DOM, содержащий ваше изображение в SRC.

Это, скорее всего, проблема с браузером, поскольку он должен масштабировать ваши изображения вниз от 2k x 2k до 100 x 100. Это довольно дорогостоящий материал для интерполяции. Итак, ваша основная проблема может быть, как вы упомянули, размером с изображение.

Даже предварительная загрузка не была бы полезной, потому что тогда у вас были бы такие же проблемы.

В моих глазах у вас должно быть две версии вашего изображения: один маленький (размер, который вы хотите перетащить), и большой, тот, который вы хотите отобразить. Большой может быть загружен автоматически в фоновом режиме или по требованию, когда пользователь нажимает на изображение. В Интернете довольно распространено, чтобы показать масштаб изображения на экране с плавной анимацией и начать предварительную загрузку в фоновом режиме, а когда предварительная загрузка закончена, замените полноэкранное изображение, чтобы удалить эффект пикселя.

Надеюсь, я ясно дал понять.

Answer 2

Ключ к тому, что вы пытаетесь сделать, это называется предзагрузка. Однако вам нужно подумать о том, как вы хотите это сделать.

Предварительная загрузка включает загрузку изображения в теге img вне экрана, но все еще в DOM. Это локально кэширует изображение, а это означает, что при следующем использовании источника такого же источника он вытащит из кеша вместо запроса сервера для изображения (и, таким образом, мерцает).

Предзагрузка изображение простой вопрос:

(new Image()).src="mysource.png"; 

То, что вы хотите, чтобы решить, когда вы хотите загрузить изображения. Если вы сначала загружаете их все, вы, вероятно, будете использовать большую пропускную способность. Если вы загрузите их по клику, вы получите буферизацию.

Вы можете проверить, если изображение загружается с использованием настоящего onload событий на Img тегов и завернутые в JQuery, если это необходимо, следующим образом:

var i = new Image(); 
i.onload = function() { 
    console.log("Loaded"); 
} 
i.src = "mysource.png"; 

Кредиты Робину Leboeuf для краткого изображения() формы.

Answer 3

См. Комментарии. Вы должны убедиться, что изображения загружены до вы покажете им. Это называется предварительной загрузкой и может, например, быть достигнуты с помощью скрытых изображений (не используя display:none, но размещая их на экране), у которых есть SRC, который вы хотите.

Редактировать: см. Более подробный ответ by @ Sebástien!

Answer 4

Вы можете использовать функцию, как это для предварительной загрузки изображений:

function imagesPreload(){ 
    var imgArray = new Array("path/to/img1.jpg", "path/to/img2.jpg", "path/to/img3.jpg"); 
    for (var i=0; i<imgArray.length; i++) { 
     (new Image()).src = imgArray[i]; 
    } 
}