HTML+CSS+JavaScript

Вознкила проблема с очень долгой загрузкой изображений.
делаю это так:

в im[i] содержатся названия файлов.

for (i=0; i<4000; i++) { tmp[i] = new Image(); tmp[i].src =im[i]; }

вопрос к специалистам. как увеличить скорость?!!

картинок может быть и 10.000!!!! это грузится примерно 5-минут. скорость канала позволяет скачивать с огромной скоростью. чувствую что загвоздка в какойто неправильно инициализации.

А может быть, не имеет смысла подгружать 10000 изображений сразу? Кроме программерских хитростей наверняка можно определить задачу и подойти к решению с другой стороны? Давайте разберем: для чего Вам такое большое количество картинок на странице?

вот скрин программы: из него думаю будет понятно.
http://i023.radikal.ru/0806/5b/5dc0175955f3.jpg

т.е. чтобы быстро просматривать фотки мне сначало надо их закэшировать.
вот как сделать этот процесс быстрее.
может цикл тормозит... может можно без него этосделать.
т.е. сразу в код страницы писать:

myImage[0] = new Image()
myImage[0].src = "0000001.jpg"
myImage[1] = new Image()
myImage[1].src = "0000002.jpg"

или это не ускорит?

Во-первых, вам необходимо знать, что кеширование само по себе не даст вам желаемого эффекта.
Т.е. если вы полагаете, что загрузите в кеш 10 картинок способом

myImage[0] = new Image() myImage[0].src = "0000001.jpg"

, то после этого ваш браузер не будет лазить на сервер, то вы ошибаетесь. Браузер при создании тега <img src="0000001.jpg"> все равно полезет на сервер, чтобы проверить - "а не изменилась ли картинка с того времени, когда она загрузилась в кеш?", т.е. пошлет http-запрос на получение заголовка файла. И только тогда, когда получит ответ с сервера - "заголовок не изменился" - начнет эту картинку отображать. Нужно применить ИНОЙ СПОСОБ (о нем - ниже).

Во-вторых, загружать 10 тысяч картинок в кеш - это огромное насилие над дисковым пространством компьютера и над его памятью. Зачем хранить в кеше целых 10 тысяч, если В КАЖДЫЙ КОНКРЕТНЫЙ МОМЕНТ ВРЕМЕНИ ПОЛЬЗОВАТЕЛЬ ИМЕЕТ ДОСТУП ВСЕГО К ДЕСЯТИ-ДВЕНАДЦАТИ КАРТИНКАМ?

Посудите сами: посчитайте - сколько ссылок (кнопок), ведущих к показу НОВОГО изображения имеется на странице http://i023.radikal.ru/0806/5b/5dc0175955f3.jpg ?
Сколько у вас получилось? Десять? Двенадцать?..
Зачем В ДАННЫЙ МОМЕНТ ВРЕМЕНИ хранить в памяти ещё 9980-9982 картинки, доступ к которым у пользователя не имеется?

---------------

Реализация (правильная, чтобы страница "летала").
1. Картинка, показываемая юзеру в данный момент времени (тег <IMG>) заменяется ПОЛНОСТЬЮ, т.е. не сменой SRC у текущей картинкой, а ПОЛНОЙ заменой тега <IMG> на другой тег <IMG> (имеющийся в виде ОБРАЗА) методом replaceChild (), например.

2. Как только замена произошла, скрипт "пробегает" по всем ссылкам/кнопкам, доступным юзеру, "вытаскивает" из них те самые 10-12 SRC картинок, доступных юзеру в пределах одного нажатия на кнопку/ссылку на странице и помещает их в массив CurrentAvailableSRC. А затем создает еще 10-12 ОБРАЗОВ этих картинок:

var OBRAZ = new Array (); for (var j = 0; j < CurrentAvailableSRC.length; j++)    {    OBRAZ [j] = document.createElement ('img');    OBRAZ [j].src = CurrentAvailableSRC.length [j];    }

3. Нажал юзер на кнопку/ссылку (или подошло время смены картинок) - происходит ЗАМЕНА показываемого тега <IMG> на ОДИН из нужных ОБРАЗОВ. И - снова работает пункт 2.

Таким образом, в самом документе будет храниться одновременно всего 10-12 картинок, НУЖНЫХ для работы БЫСТРО, а кеш браузера будет пополняться АВТОМАТИЧЕСКИ.
При этом при замене тегов браузер на сервер уже не полезет - замена будет МГНОВЕННОЙ.

Понятен принцип?

Спасибо за такой подробный ответ.
но к сожалению я не настолько владею javascript =(
и не совсем представляю как написать внукцию подгрузки изображений.
т.е. я понял что в определённый момент времени держать в памяти больше 20-30 картинок не имеет смыла.
как подгрузить именно 1 картинку при нажатии кнопки вперёд?


И ещё у меня там стоит ползунок двигая который происходит быстрая промотка всех изборажений за весь день. пожалуй для этого без предварительного кэширования не обойтись.

P.S. для ползунка использую YAHOO.widget.Slider
Все названия картинок у меня лежат в массиве:
im = new Array("200806110443457428.jpg","200806110446577429.jpg","200806110516377430.jpg",......

>И ещё у меня там стоит ползунок двигая который происходит быстрая промотка всех >изборажений за весь день. пожалуй для этого без предварительного кэширования не >обойтись.
Помоему возникает та же ситуация которая обсуждалась выше. Если пользователь мотает изображения наверно нет смысла показывать их всех (бедолаги сколько трафика уйдет или скорость упадет) наверное будет лучше показать ему именно ту на оторой он остановится а не листать их таким образом одну за одной

>и не совсем представляю как написать внукцию подгрузки изображений.

Странный вы какой-то. Малопонятливый.
Никакой подгрузки не надо - о чем я долго и нудно писал.

>И ещё у меня там стоит ползунок двигая который происходит быстрая промотка всех изборажений за весь день. пожалуй для этого без предварительного кэширования не обойтись.

Не... точно странный.
Слова "предварительное кэширование", видимо, настолько понравились, что без упоминания их теперь и спать не ложитесь? :-)

А можно без туманных намёков дать полностью рабочий код, показывающий
как пользоваться replaceChild ()?

>можно без туманных намёков дать полностью рабочий код

Разумеется, можно :-)
Только оно мне надо?

Чтобы код был "полностью рабочим", мне надо будт самому "додумать" - как там всё у товарища на странице устроено, а именно:
- что означают ссылки "Ангар", "Холл"...
- к чему ведут нажатия на цифры 03, 04, 05,...14
- как именно устроено перемещение при нажатиях на кнопки <10 , >10
- как именно реализовано слайд-шоу и как работает "ползунок"

Затем все это надо будет мне "спрограммировать", чтобы оно работало, скомпоновать всё это вместе и выложить здесь...

А товарищ топикстартер потом напишет, что я "неверно догадался", и нажать на "Холл" - это значит, например, вызвать снизу охранника, написав ему электронное письмо... и предожит мне попробовать догадаться обо всём остальном ещё раз... :-)

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

Вообщем сделал. отдельно сделал кнопку чтобы подгрузить всё.
А так загружаю каждое изображение отдельно. с replaceChild не разобрался.
но в целом стало быстрее. всем спасибо за советы.