Смена картинки, после ее загрузки.

[Vladiger]

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

В страничке HTML вставлена большая фотография, но пока она грузится, нужно вместо фотографии вывести маленькую картиночку типа "LOADING" или что-то типа . После того когда большая фотография догрузится до конца, ее нужно вставить в документ вместо маленькой картиночки "LOADING".

Я сделал так:

<script type="text/javascript">
function ChangeImage(id, photo) {
 document.getElementById(id).src = photo;
}
</script>
<img id="1" src="loading.gif" onload="ChangeImage('1', 'photo.jpg')">

Но чет я видать не учел. Картинка меняется, но как-то не понятно по какому событию. Думаю что она меняется после загрузки маленькой картиночки loading.gif, а не после загрузки фотографии. К тому-же браузер виснет, точнее не виснет, а постоянно что-то грузит, не прекращая.

Подскажите как вставить фото в документ, после загрузки этого самого фото, но что-бы в момент загрузки в документе была маленькая картиночка "LOADING" .

[Tokolist]

дык, ты же делаешь зацикливание

постоянно происходит событие onload

надо либо делать какую-нибудь проверку

либо используй

createElement('img')

и

replaceChild

[Vladiger]

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

В общем:

createElement('img') и replaceChild - это не пример, а всего навсего пару функция Javascript. Как-то не очень понятно, как именно их использовать и.т.д и.т.п...

Ситуация осложняется еще и тем, что в Javascript я пока знаю тока что есть такой язык, ну и еще пару строчек кода могу написать на Javascript... Все остальное (знания и опыт) пока только в проекте.

Ну сами посудите: - Стал бы я задавать подобные вопросы на форуме, будучи профи в Javascript?

PS Если не трудно, можно фрагментик кода? Он же не большой, всего-то пару строчек, только не просто функций, а именно кода - Как сменить изображение после его загрузки?

Пожалуйста!

[Tokolist]

мда... взглянул я на Ваш код - вообще не вижу где там логика

короче, все это должно выглядеть приблизительно так

1. картинка "LOADING" при загрузке страницы видима плюс id="loading"

2. гдето в

или в или в событии onload для window

var loadingImg = document.createElement('img');
loadingImg.onload = function() {
  var elem = document.getElementById('loading');
  elem.parentNode.replaceChild(loadingImg, elem);
}
loadingImg.src = 'photo.jpg';

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

[Vladiger]

мда... взглянул я на Ваш код - вообще не вижу где там логика

var loadingImg = document.createElement('img');
loadingImg.onload = function() {
 var elem = document.getElementById('loading');
 elem.parentNode.replaceChild(loadingImg, elem);
}
loadingImg.src = 'photo.jpg';

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

Логика конечно у меня была, но своеобразная. То что она ошибочная - это бесспорно, но то что она была - это однозначно. Логика она ведь либо есть либо нет, так вот у меня она была примерно такова: - Типа событие OnLoad означает что запустится функция Javascript в тот момент, когда до конца загрузится изображение в теге

[Tokolist]

я бы делал не так... но если Вам так больше подходит...

есть смысл поменять эти строчки местами

 img[id].src = url;
 img[id].onload = function() { document.getElementById(id).src = img[id].src; }

[Vladiger]

я бы делал не так... но если Вам так больше подходит...

есть смысл поменять эти строчки местами

 img[id].src = url;
 img[id].onload = function() { document.getElementById(id).src = img[id].src; }

Да, возможно вы и правы. Смысл поменять строчки местами вероятно есть.

Но мне хотелось бы узнать, почему именно вы не стали бы так делать?

Я предполагаю что вам не понравилось то, что если на странице будет загружаться 20 изображений одновременно (или более), то браузер все свои ресурсы отдаст на обработку 20-ти событий OnLoad и 20 одинаковых функций, которые ожидают своего старта выполнения.

Или может я ошибаюсь?

Тем не менее мне самому чет не очень понравилась эта штука... Для одного (двух) изображения еще куда ни шло, а вот если их много, то браузер начинает тормозить при прорисовке HTML страницы.

Это происходит быстро, но заметно на глаз. Страничка весом всего-ничего (несколько байт) которая моментально грузится вместе с одной кешированной картинкой loading.gif но без Javascript, начинает зависать на какие-то 0.5 секунды при обработке вставленного Javascript.

При том происходит это как-то странно. Первые два изображения грузятся моментально, затем зависание на 0.2 - 0.5 секунд и последующая прорисовка остальных 18 изображений. После этого начинается ожидание загрузки полноразмерных изображений, которые появляются в хаотическом порядке (по мере загрузки). При низкой скорости интернет соединения (например DialUp) это как-то жутко выглядит. Думаю что пользователь не станет ждать 30 минут пока все 20 фото загрузятся.

Какие причины у вас Tokolist? Объясните если не трудно....

[Tokolist]

1. если у пользователя скрипты отключены он не увидит картинки

2. в идеале скриптов в html-коде не должно быть, в частности в данном случае

3. лучше имхо использовать replaceChild вместо

document.getElementById(id).src = img[id].src;

тормозит скорей-всего потому, что необходимо запускать все это дело отдельным потоком

setTimeout(foo, 0)

ЗЫ возможно сделаю попозже небольшой пример, как бы реализовал все это я