HTML+CSS+JavaScript

Всем доброго времени суток)

Нужно на загрузку картинок привязать определенное действие.
К примеру:

var pic = new Image(); pic.src="image.gif"; pic.onload=function () {  // определенное действие }

Так вот это для одной картинки, а как быть если картинок несколько? Другими словами нужно сделать массив с картинками, при загрузке которого выполняется действие.
Я в js не селен, так что, если это возможно, то пожалуйста в подробностях.
Этот вариант http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=60640 не подходит.

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

document.execCommand('BackgroundImageCache',false,true);

, а что с ним делать я без малейшего понятия, ссылка на форум где нашел этот "трюк" http://xpoint.ru/forums/programming/javascript/misc/thread/43444.xhtml

Я понимаю, что тема заезженная, но в нете, ничего путного не нашел...
Помогите пожалуйста

А почему "этот вариант http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=60640 не подходит"?

Проверьте этот код в любом браузере AS IS:

<script> var Z = 0; function myFunc () { Z++; if (Z == 3) alert (Z); //замените alert на нужное вам "определенное действие" }  var pic = new Array (new Image (), new Image (), new Image ()); pic [0].src="http://imgl.yandex.net/i/www/logo1.png"; pic [1].src="http://img.yandex.net/i/artlebedev2007.png"; pic [2].src="http://www.google.com/intl/en_ALL/images/logo.gif"; pic [0].onload = myFunc; pic [1].onload = myFunc; pic [2].onload = myFunc; </script>

Обратите внимание, что при назначении функции круглые скобки ставить не надо - pic [n].onload = myFunc;

А почему "этот вариант http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=60640 не подходит"?
_____________

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

<td width="336" height="101" style="background:url(../images/boost_top_left.gif)">

Хотя... можно в этот тег запихнуть, "дырявую картинку" 1x1пиксель и уже на нее ставить событие onLoad... но это теория, с-час нужно будет проверить.

Ну а если ставить код прелоада в конце страницы, то он некорректно работает(то меняет стиль, то не меняет) в Opere и в IE.

Вот код

<script language="javascript"> var bond=0; function preload_img() { bond++; if(bond==8) {document.getElementById('header_preload').style.visibility="visible";} if(bond==12) {document.getElementById('right_preload').style.visibility="visible";} if(bond==18) {document.getElementById('left_preload').style.visibility="visible";} if(bond==24) {document.getElementById('main_preload').style.visibility="visible";} if(bond==28) {document.getElementById('sort_preload').style.visibility="visible"; document.getElementById('sort_preload_1').style.visibility="visible";} if(bond==30) {document.getElementById('view_gr_preload').style.visibility="visible";} if(bond==34) {document.getElementById('view_preload').style.visibility="visible";} } pic_array = new Array(); for(a_2=0;a_2<=33;a_2++) { pic_array[a_2]=new Image(); } pic_array[0].src="images/boost_midle_left.gif"; pic_array[1].src="images/boost_midle_right.gif"; pic_array[2].src="images/boost_bottom.gif"; pic_array[3].src="images/boost_top_center.gif"; pic_array[4].src="images/boost_top_left.gif"; pic_array[5].src="images/boost_top_right.gif"; pic_array[6].src="images/button_down.gif"; pic_array[7].src="images/button_up.gif"; pic_array[8].src="images/left_top_4.gif"; pic_array[9].src="images/right_top_4.gif"; pic_array[10].src="images/left_bottom_2.gif"; pic_array[11].src="images/right_bottom_2.gif"; pic_array[12].src="images/main_menu.gif"; pic_array[13].src="images/main_menu_over.gif"; pic_array[14].src="images/main_menu_click.gif"; pic_array[15].src="images/li.gif"; pic_array[16].src="images/button_down_sort.gif"; pic_array[17].src="images/button_up_sort.gif"; pic_array[18].src="images/left_top.gif"; pic_array[19].src="images/left_bottom.gif"; pic_array[20].src="images/right_bottom.gif"; pic_array[21].src="images/right_top.gif"; pic_array[22].src="images/button_down_search.gif"; pic_array[23].src="images/button_up_search.gif"; pic_array[24].src="images/left_bottom_1.gif"; pic_array[25].src="images/left_top_1.gif"; pic_array[26].src="images/right_bottom_1.gif"; pic_array[27].src="images/right_top_1.gif"; pic_array[28].src="images/right_bottom_1.gif"; pic_array[29].src="images/right_top_1.gif"; pic_array[30].src="images/right_top_3.gif"; pic_array[31].src="images/view_in.gif"; pic_array[32].src="images/view_out.gif"; pic_array[33].src="images/left_top_3.gif"; for(a_1=0;a_1<=33;a_1++) {     pic_array[a_1].onload=function ()     {     preload_img();     } } </script>

Что Вы можете посоветовать по этому поводу?

Вы, как я понял, НЕВЕРНО представляете себе процесс загрузки нескольких объектов в браузере.

Браузер НАЧИНАЕТ загружать картинки СРАЗУ по мере появления в коде SRC картинок, т.е. по их ПОРЯДКУ в коде.
Сначала НАЧИНАЕТ грузиться картинка pic_array[0], затем СРАЗУ же НАЧИНАЕТ грузиться pic_array[1],
затем pic_array[2] и т.д.
Т.е. картинки грузятся не по одной, а сразу несколько...

Но вот ЗАКАНЧИВАТЬ процесс загрузки каждой картинки браузер будет ТАК, КАК ПОЛУЧИТСЯ.
Т.е. сначала может ЗАКОНЧИТЬСЯ загрузка картинки pic_array [32], потом ЗАКОНЧИТСЯ
загрузка картинки pic_array[21] и только потом ЗАКОНЧИТСЯ загрузка картинки pic_array[2],
а картинка pic_array[0] вполне может ЗАКОНЧИТЬСЯ загружаться самой последней.

Порядок окончания загрузки картинок КАЖДЫЙ раз будет разным. Зависит это от очень многих причин.
Одна из причин очевидна:

Например, картинка, начавшаяся загружаться ПЕРВОЙ, находится на очень медленном сервере, а вторая, третья и последующие - на другом сервере, быстром. Браузеру теперь, что - ждать покуда медленный сервер не отдаст первую картинку и сознательно ограничивать загрузку второй и последующих картинок?

В общем, в вашем случае необходимо "разбить" подсчёт на этапы.
Т.е. сделать нужно так:

function preload_img() { bond++; if(bond==8) {document.getElementById('header_preload').style.visibility="visible"; for (var j = bond; j < 12; j++) pic_array [j].onload = preload_img} if(bond==12) {document.getElementById('right_preload').style.visibility="visible"; for (var j = bond; j < 18; j++) pic_array [j].onload = preload_img} if(bond==18) {document.getElementById('left_preload').style.visibility="visible"; for (var j = bond; j < 24; j++) pic_array [j].onload = preload_img} if(bond==24) {document.getElementById('main_preload').style.visibility="visible"; for (var j = bond; j < 28; j++) pic_array [j].onload = preload_img} if(bond==28) {document.getElementById('sort_preload').style.visibility="visible"; document.getElementById('sort_preload_1').style.visibility="visible"; for (var j = bond; j < 30; j++) pic_array [j].onload = preload_img} if(bond==30) {document.getElementById('view_gr_preload').style.visibility="visible"; for (var j = bond; j < 34; j++) pic_array [j].onload = preload_img} if(bond==34) {document.getElementById('view_preload').style.visibility="visible";} }

ну и самое первое назначение функции preload_img (после прописывания SRC у объектов Image)
тоже сделать нужно только для восьми первых картинок:

for (var a_1 = 0; a_1 < 8; a_1++) pic_array [a_1].onload = preload_img;

------------------------------
ВТОРИЧНО обращаю ваше внимание - при назначении круглые скобки после имени функции не ставятся.
Если бы вы прочитали это в первый раз (и постарались бы ПОНЯТЬ),
то не стали бы писать ту фигню, что написали здесь.
Зачем писать

pic_array[a_1].onload=function ()     {     preload_img();     }

если можно сделать это втройне короче?

pic_array [a_1].onload = preload_img;

Сами ответьте себе на этот вопрос :-)

--