HTML+CSS+JavaScript

Есть галерея картинок (небольшого размера)
При нажатии на картинку, к отдельному блоку <IMG> присваивается соответсвующий src= путь к картинке большего размера. И одновременно выводится progressbar (индикатор загрузки изображения). После события onLoad, для этого изображения, срабатывает функция, которая скрывает progressbar.
Вот с этим onLoad и возникает проблема. Первый раз оно срабатывает нормально, но когда снова выбираешь эту же картинку из галереи, события onLoad не происходит, т.к. картинка закешировалась браузером, и progressbar после включения не исчезает.

Дамал, что решу проблему созданием массива, каждый элемент которого, содержал бы информацию о загрузке для каждой картинки. Тоесть как только картинка загрузится, в массив к соответсвующему идентификатору присваивается значение true. Предполагалось, что при последующем вызове функции, проверялся бы элемент массива, и если оно true, то progressbar не выводить.

Но это изврат :) .

А в IE 7 это не прокатило, там при перезагрузке страницы, картинки все еще остаются в кэше браузера. Тоесть опятьже, события onLoad не произойдет а массив будет чист.

Пожалуй, единственное верное решение - это как-то проверять, загружена ли картинка браузером, находится ли она в кэше. Но как это сделать? Подскажите , кто знает.

Вот пример кода:

<!-- GALLERY //--> <img src="img1.jpg" onClick="art_view('img1big.jpg');"> <img src="img2.jpg" onClick="art_view('img2big.jpg');"> <img src="img3.jpg" onClick="art_view('img3big.jpg');"> <!-- GALLERY //--> <img id="full_img"> <script type="text/javascript"> function art_view(path) {     var img = document.getElementById("full_img");     img.src = path;     show_progress();     img.onload = function()     {         hide_progress();     } } //Функция show_progress(); включает индикатор загрузки, hide_progress(); - выключает. </script>

Проблемы были обнаружены в браузерах IE и Opera 9.27
В FireFox все нормально.

Итак, проблема была решена, хоть и не лучшим способом но все же....

Оказывается, благодяря некоторым магическим свойствам, если пересоздать объект IMG , то onLoad всеже сработает %)
Вот оно как:

<!-- GALLERY //--> <img src="img1.jpg" onClick="art_view('img1big.jpg');"> <img src="img2.jpg" onClick="art_view('img2big.jpg');"> <img src="img3.jpg" onClick="art_view('img3big.jpg');"> <!-- GALLERY //--> <div><img id="full_img"></div> <script type="text/javascript"> function art_view(path) {     var img = document.getElementById("full_img");     var pimg = img.parentNode;     show_progress();     pimg.removeChild(img);     pimg.innerHTML = "<img src=\""+path+"\" id=\"full_gallery_img\" onLoad=\"hide_progress();\">"; } //Функция show_progress(); включает индикатор загрузки, hide_progress(); - выключает. </script>

Попробуйте исполнить следующую инструкцию по смене носков.

Только выполняйте её БУКВАЛЬНО, пункт за пунктом.

1. Оденьте новые носки. 2. Снимите ботинки. 3. После смены носков оденьте ботинки.

Получилось у вас?:-)
После выполнения пункта первого новые носки у вас должны быть натянуты НА ботинки СВЕРХУ :-)

Страшно представить, что с вами будет, когда вы БУКВАЛЬНО исполните другую инструкцию... по пользованию унитазом :-)

1. Справьте вашу нужду. 2. Поднимите крышку унитаза. 3. По окончании ваших дел крышку унитаза закройте.

1. СНАЧАЛА надо браузер предупредить о том, что ему делать по ONLOAD.
2. ЗАТЕМ надо включить прогресс-бар.
3. В ПОСЛЕДНЮЮ ОЧЕРЕДЬ надо присваивать новый SRC.

Вы же делаете всё НАОБОРОТ. :-)
Самое удивительное в том, что у вас "В FireFox все нормально" :-)

PS. Предупредить браузер о том, что ему делать по ONLOAD надо всего 1 (ОДИН) раз.
Лучше всего - прямо в теге <img id="full_img">

<!-- GALLERY //--> <img src="img1.jpg" onClick="art_view('img1big.jpg');"> <img src="img2.jpg" onClick="art_view('img2big.jpg');"> <img src="img3.jpg" onClick="art_view('img3big.jpg');"> <!-- GALLERY //--> <img id="full_img" onload="hide_progress()"> <script type="text/javascript"> function art_view(path) {     var img = document.getElementById("full_img");     show_progress();      img.src = path; } //Функция show_progress(); включает индикатор загрузки, hide_progress(); - выключает. </script>

;)))

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

даже так :

function art_view(path) {     var img = document.getElementById("full_img");     show_progress();      img.src = path; }

Вот пока тот вариант с пересозданием картинки работает нормально.

И у меня работает нормально:

<!-- GALLERY //--> <img height="40" border="1" src="http://imgl.yandex.net/i/www/logo1.png" onClick="art_view('http://mrhiggins.net/algebra2/wp-content/uploads/2008/06/smile.jpg');"> <img height="40" border="1" src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="art_view('http://i107.photobucket.com/albums/m282/pure100/com2/smile/smile073.jpg');"> <img height="40" border="1" src="http://us.i1.yimg.com/us.yimg.com/i/us/aw/g/fresh/white/atwlogo_h.gif" onClick="art_view('http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Smile_fasdfdsfoiueire.svg/498px-Smile_fasdfdsfoiueire.svg.png');"> <!-- GALLERY //--> <hr> <img id="full_img" onload="hide_progress()" style="position: relative"> <img id="progr_load" src="http://www.otwomedical.com/images/ajax_loader.gif" style="position: absolute; display: none"> <script type="text/javascript"> function show_progress() { var l = t = 0, o = document.getElementById("full_img"); while (o.offsetParent)    {l += o.offsetLeft; t += o.offsetTop; o = o.offsetParent} with (document.getElementById("progr_load").style)    {top = t; left = l; display = 'inline'} } function hide_progress () { document.getElementById("progr_load").style.display = 'none'; } function art_view(path) {     var img = document.getElementById("full_img");     show_progress();      img.src = path; } </script>

А теперь проверьте это в Opera 9.27 , если есть такая возможность конечно.
Просто выберите одну и туже картинку два раза. прогресс просто зависнет поверх картинки и ни куда не исчезнет.

Кста, в опера 10 все норм :)

Как бы там нибыло, наиболее кроссбраузерным, остается мой вариант.

>"А теперь проверьте это в Opera 9.27 , если есть такая возможность конечно."

Нет такой возможнсти.
Есть Opera 9.52 - в ней всё OK, как и должно быть ВЕЗДЕ!
Если вдруг вы обнаружили какую-то багу в Opera 9.27, то честь вам и хвала.
Но... "на всякий чих не наздравствуешься".

Мой вариант ЛОГИЧЕСКИ верен.
В отличие от первого здесь вами выложенного.


>"Как бы там нибыло, наиболее кроссбраузерным, остается мой вариант."

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

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

Вообщем, выход есть там, где его и не искал)))
Короче, перегрузи картинку имаджем с гет запросом, сгенерированным случайно, типа
img.jpg?7589290987458
Конечно, изврат, но лучше ))))