Чего-то непонятное вы тут развели ... совсем в дебри зашли.



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

Другое дело, что если действительно хотя бы одной картинки не будет на сервере или где-то закрадется ошибка, то вся страница так и не покажется. Это действительно можно решить с помощью функции, вызываемой таймером, через достаточно длительное время 15-30 секунд, которая в любом случае откроет страницу. Тут вариантов для размышления много: подстановка картинки-ожидалки, изменение всего окна, ajax-запрос с "выяснением судьбы" картинки на сервере с последующим отображением. Одним словом, тему можно развивать в этом направлении до полного абсурда .

IDVsbruck, а в работе этот код нельзя посмотреть? А то вы только кусочек привели... А где оно аппендчилдица?

И если не трудно, смысл этой строчки объясните:


Я понимаю, что она означает "хрен вам, а не оработчик"   Но ведь обработчиков и так нет...

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

Блин, чего то сморозил... Видимо не проснулся ещё...   Обработчик то на дюйм выше...  
Но все равно посмотреть бы на работающий пример... А то у IE своё особенное отношение к событию onload.

Добавлено через 3 минуты и 12 секунд
В IE должен правильно работать readyState...

У меня нет от <html> до </html> ... это я тут накропал. Но код должен быть на 95% работающий. Просто часто приходится сталкиваться с загрузками/подгрузками и т.д. - проекты в основном динамические и на ajax'е построены.
Да вроде все привел. Просто в последние функции вставить что надо, тем более, что "а показать и скрыть body, даже я смогу" (с) ... 
createElement сдужит не для отображения, а просто, чтобы подхватить картинку с сервера. Если не нравится, что память замусорена, то их перед отображением боди можно удалить. Суть в том, как работает механизм загрузки картинок: если раз была загружена в кеш, то второй раз уже берется из него, а не подгружается.

Нет, ну что код не будет работать, это точно.    На сто процентов. 
Кроме того, что создать элемент методом createElement, нужно его ещё и в дерево поместить, т.е. добавить appendChild. Счас проверю, как он поведет себя в IE6....

Добавлено через 7 минут и 15 секунд
А всё же, ято означает эта сточка?
document.getElementById(image_id).onload = null;
Я первый раз такое вижу, зачем? Чего боимся?

Да, действительно onload у img работает исправно во всех браузерах. А то я что то сомневался... у боди в IE6 onload настыпает если даже ещё не загружены картинки в массив. Да и у фрейма onload не работает в IE6.

Короче, вот работающий код.



Использовать скрытие боди не стал, не всегда это удобно.



Это сообщение отредактировал(а) Ghirik - 30.5.2008, 21:06

Ghirik, извини, но ты не понял моей идеи, которую я, в принципе, не очень стал комментировать.
Не надо ничего делать с созданными картинками: ты же не знаешь, куда именно они поместятся - в бекграунд, див, таблицу и т.д. А может, среди них есть пока скрытый анимационный гиф, который показать надо в каком-то определенном месте? Не надо ничего накапливать, чтобы потом пытаться вставить ...

Есть постановка задачи: есть страничка (простая или сложная - нам все равно), которую надо показать только после того, как загрузятся все имиджи. Может, она получена асинхронно с сервера?
Вот пусть она и остается страничкой. В своем скрипте я просто делаю прелоадер картинок с сервера на клиента, а не в страничку (!!!). Когда загрузили все, открываем страничку, в которой ссылки на картинки остались прежними - с сорсами на относительном пути как они лежат на сервере. Просто работа загрузки картинок так работает, что когда клиент снова сталкивается с картинкой (которую мы только что подгрузили), то проверяет ее наличие у себя в кеше ... а мы знаем, что только что ее туда загрузили. Поэтому она будет показываться практически мгновенно (в принципе, практически незаметно для глаза).

Я проверил свой код. Все-таки я не ошибся и он на 100% рабочий. Я понимаю, что смущает постоянное переопределение переменной, которой присваивается элемент имиджа и заново дается событие и т.д. Конечно, выглядит абсурдно, но javascript настолько гибок, что данная вещь работает. Причем, каждая картинка вызовет именно свой обработчик, со своим указанным id.

Насчет строчки document.getElementById(image_id).onload = null; ... По неизвестной мне причине при последующей загрузке картинок почему-то бывает сбой и картинка снова качается (типа no-cash для нее срабатывает). Получается, что если мы все же будем использовать созданные элементы в странице (по id или посредством DOM), то возможно повторное скачивание картинки. Поэтому, чтобы не допустить повторного вызова обработчика, мы его переопределяем. Как говорится ... лучше перебздеть, чем недобздеть. Это я как бы в своем коде сразу поставил блоки против неправильной работы ... мне все равно, а тому, кто будет использовать, будет небольно.

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



Причем, это тот же код, что и делался раньше . Если бы мы делали задачу ТОЛЬКО под ИЕ, то код мог бы бытть еще короче на строчку:



Добавлено через 14 минут и 52 секунды
Да, кстати ... твой код

должен либо выкидывать эксепшн (в ИЕ будет желтый треугольничек внизу), либы добавлять к боди лишний элемент типа undefined.
Объясняю: пусть img_max = 2, выражение while (i--) возьмет значение 2, сверит его с 0, а лишь затем вычтет единицу. А imgs[2] у нас нет, и равно undefined. Значит, пройдет 3 значения: imgs[2], imgs[1], imgs[0].
Чтобы у тебя работало, должно быть while (--i) document.getElementsByTagName('body')[0].appendChild(imgs[i]);

Кстати, подобная аналогия с for (var i = 0; i < 10; i++): первым идет i=0, а не 1 (i++).
Хотя это исключительно теоретическая платформа, проверять на практике лень - чем черт не шутит, возможно, по неизвестной мне причине будет работать. В этом случае приношу извинения.

Ну, Вы добавьте ещё восемь картинок и вывод на страницу, а уже потом рассматривайте элегантность...    Это будет минимум ещё два цикла, и второй уже не запишешь onload = function() {if .....

Это всё мелочи, и while вроде нормально работает, просто он нулевую картинку не берет, я подумал ну и пусть, зато элегантнее.  Сейчас обнаружил другой косяк... IE успешно кэширует картинки, и при повторном заходе на страницу даже и не собирается их загружать. Соответственно, события onload не происходит, и не что не аппендчилдится. IDVsbruck, как Вы решаете эту проблему?
Использовать таймаут у меня рука не поднимается, но пока решения не вижу....

Тьфу, блин! как я про complete то забыл... счас проверку устрою...

Вот анекдот то! Сделал так.



Специально оставлю эту ссылку на файл с таким кодом.

IE6 совершенно странно    себя ведет при повторных заходах по ссылке, попробуйте....

Добавлено через 4 минуты и 23 секунды
Ни чего не понимаю... сейчас нормально стало открываться... А до того как написал предыдущий пост, открывались не все картинки. При том каждый раз - разное количество.... 

Добавлено через 6 минут и 24 секунды
Какой то глюк был... Сейчас всё нормально. Пошел исправлять выложенный код.

Добавлено через 13 минут и 34 секунды
Во!!!, теперь снова глючит....   

Это сообщение отредактировал(а) Ghirik - 30.5.2008, 19:29

Не успевает он, что ли, проверить наличие файла в кэше....

Да хоть 88! Какая разница? Зачем еще несколько циклов?? - Я так понимаю, что мои объяснения или не приняты, или не дошли ... Код совершенно рабочий для ЛЮБОГО количества картинок.

С кешированными картинками пришлось задуматься минут на 10 ... но решение вполне доступное и простое. Более того, мы все им пользуемся достаточно часто.
Надо генерировать случайное число/строку и добавлять к src: preload_image.setAttribute("src", image_urls[i] + "?rand=" + random_variable) - так картинки будут грузиться гарантийно каждый раз.

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

Я считал, что задача стояла задержать отображение до полной загрузки картинок. Так вроде автор темы просил... Или он просил научить складывать картинки в кэш? Что толку от загруженных в кэш картинок, без правильного механизма их вывода на экран, без правильно полученного события окончания загрузки. Мой код практически ни чем не отличается от предлагаемого вами. Как мой код не работал качественно, так в точности и ваш.

По своему коду я вот такое решение нашел, я о readyState уже писал, он правильно работает.



Сейчас попробую и ваше....

Добавлено через 10 минут и 36 секунд
imgs[i].readyState == "complete"  тоже через раз работает.... 

Добавлено через 13 минут и 31 секунду
preload_image.setAttribute("src", image_urls[i] + "?rand=" + random_variable) - с родни шаманству, даже проверять не стану. Нужно у браузера узнавать, есть ли у него такая картинка. А если шаманить, то тогда можно и на серере это решить....  

Это сообщение отредактировал(а) Ghirik - 30.5.2008, 20:43

Я выпадаю из спора, так как считаю, что мы движемся по разным, но параллельным, путям к решению задачи. А наши решения, похоже, кроме нас самих никому не интересны .
Просто на страницах форума я никогда не решаю задачи от <html> до </html> - неинтересно, да и не хочется. Да и проверять код не хочу - жалко времени и лень.
Считаю, что автор топика в любом случае сможет составить какое-то решение, основываясь на наших постах. Рад общению и спору.

Спасибо за компанию.   

Я выяснил причину. Оказалось IE6 не картинку кэширует, а закэшировал сам HTML, и вот такой код, всё же работает.


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