Получить новое изображение, которое появляется только при загрузке, если источник изменился

Question

Получить новое изображение, которое появляется только при загрузке, если источник изменился

0

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

В моей программе используется блок-схема, в которой для определенных вопросов требуются различные изображения. Я использую следующий код для изменения источника от одного к другому.

HTML:

 <img class= 'right' id= 'imageBox' style= 'width: 20%; height: auto;' src= www.1stimage.com/>

JavaScript:

document.getElementById("imageBox").src = 'www.2ndimagesite.com';

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

Благодарю.

user2998454 15 апр. 2014, в 11:13

Источник

1

Используйте маленькое изображение, которое уже будет загружено на вашу страницу, а затем сначала установите для него источник, а затем новое изображение. Например, document.getElementById("imageBox").src='1x1.png'; а затем document.getElementById("imageBox").src = 'www.2ndimagesite.com'; Это создаст впечатление, что «ничего» не так, как вам грустно (хотя <img> технически не может отображать «ничего»).
Damir Kasipovic 15 апр. 2014, в 08:22

Теги:

javascript

html

image

3 ответа

1

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

var img = new Image();
var newsrc = 'www.2ndimagesite.com';
img.onload = function () {
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;

nedt 15 апр. 2014, в 07:23

0

Этот подход даст тот же эффект, что и автор вопроса сейчас. Это загрузит изображение только тогда, когда новое изображение будет загружено его ПК. Посмотрите эту скрипку: jsfiddle.net/p4Bd7 . setTimeout() необходим для имитации низкоскоростного соединения.
Sharikov Vladislav 15 апр. 2014, в 08:36

1

document.images[i].complete

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

Sandro T 15 апр. 2014, в 05:57

Ещё вопросы

Используйте маленькое изображение, которое уже будет загружено на вашу страницу, а затем сначала установите для него источник, а затем новое изображение. Например, document.getElementById("imageBox").src='1x1.png'; а затем document.getElementById("imageBox").src = 'www.2ndimagesite.com'; Это создаст впечатление, что «ничего» не так, как вам грустно (хотя <img> технически не может отображать «ничего»).
Этот подход даст тот же эффект, что и автор вопроса сейчас. Это загрузит изображение только тогда, когда новое изображение будет загружено его ПК. Посмотрите эту скрипку: jsfiddle.net/p4Bd7 . setTimeout() необходим для имитации низкоскоростного соединения.

Sharikov Vladislav · Accepted Answer · 2014-04-15T05-44-00.000Z

Вы можете немного изменить aproach, чтобы достичь того, чего хотите.

Вы можете предварительно загружать изображения, и после этого просто выберите, какое изображение будет показано. Вы можете узнать об этом подробнее: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
Вы можете начать загрузку нового асинхронного изображения и изменить текущее изображение на изображение, например, на загрузку счетчика или изображение, которое показывает, что что-то загружается в данный момент (например: ). В обработчике onload вы переписываете этот счетчик на загруженное изображение.

Я хотел написать ~ то же, что написал @nedt. Кстати, я не думаю, что его код поможет вам. Я думаю, вы достигнете такого же эффекта, как вы сказали в ответ. Во всяком случае, он был первым, и его ответ был близок, поэтому я просто воспользуюсь его примером.

document.getElementById("imageBox").src = "loading image link"; // load spinner

var img = new Image(); // load image asynchronously
var newsrc = 'www.2ndimagesite.com';
img.onload = function () { // onload handler
    document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;

Таким образом, старое изображение было загружено на загруженной странице. Вы сделали какое-то действие, например нажатую кнопку. Если у вас низкая скорость, будет отображаться загрузочный счетчик и после загрузки нового изображения async будет показано новое изображение. Если у вас достаточно скорости, новое изображение появится сразу.

Надеюсь, что это поможет вам!

Большое спасибо: D. Это решение лучше моего первоначального запроса и работает отлично. Это заняло бы у меня целую вечность, чтобы работать с моим ограниченным знанием JavaScript. Еще раз спасибо :)