 Javascript: предварительная загрузка изображений с бегущей строкой, готовый скрипт |
На этом месте находится расчудесная шапка. Включите flash - не пожалеете!
Здравствуйте, гость ( Вход | Регистрация )
Форум о web-дизайне, графике - RusForumz > Web-мастеру > Web-программирование: JavaScript > Готовые скрипты (javascript)  |
| iluha@iluha.ru |
 30.7.2007, 10:57
Сообщение
#1
|
 JavaScript.medved.shatun  Группа: Модераторы Сообщений: 644 Регистрация: 9.2.2007 Из: Москва Пользователь №: 2 893 Репутация:  42   |
Все знают стандартный скрипт предварительной загрузки изображений на странице.
Но почему-то я нигде не видел, чтобы этот скрипт был с бегущей строкой. Кстати, не все знают, что стандртный код предварительной загрузки только начинает загружать изображения и ещё, не закончив загрузку, уже показывает страницу. Ниже приведённый код написан мною таким образом, что вся длина бегущей строки делится на количество изображений, и только после загрузки каждого из изображений размер полоски увеличивается на это количество пикселей. Итак: HEAD страницы: Код <head> <script language="JavaScript"> function onLoad() { loadlength = loadlength + 14; document.getElementById('redline').style.width=loadlength; if (loadlength > 168) { document.getElementById('preloader').style.visibility='hidden'; } } </script> <script language="JavaScript"> document.write('<div id=\"preloader\" style=\"width: 200px; height: 50px; position: absolute; z-index: 2; left: 100px; top: 100px; background-Color: #336699; text-align: center; vertical-align : middle;\">'); document.write('<table width=182 height=50 cellspacing=0 cellpadding=0 border=0><tr><td width=182 height=22></td></tr><tr>'); document.write('<td width=182 bgcolor=\"#ffffff\" height=6>'); // бегущая строка // document.write('<img id=\"redline\" src=\"images/loader.gif\" width=1 height=6 border=0>'); // бегущая строка // document.write('</td></tr><tr><td width=182 height=22></td></tr></table>'); document.write('</div>'); var imgslide = [], // количество элементов quantityofelements = 13, i = quantityofelements, tmp, loadlength = 1; for(i=0;i<quantityofelements+1;i++) { tmp = imgslide[i] = new Image; tmp.src = 'images/img' + i + '.jpg'; tmp.onload = onLoad; } </script> </head> соответственно в теле страницы изображения указываются, например, так: Код <script language="JavaScript"> document.write('<img src=\"' + imgslide[13].src + '\">'); </script> Чуть позже ещё немного унифицирую данный скрипт. -------------------- Ничего не скрою - бегаю трусцой(ю)!
ВНИМАНИЕ: Если вы решили сказать мне спасибо за помощь, добавив + к Репутации, то убедительная просьба - ставить этот + ТОЛЬКО после того, как проблема будет ПОЛНОСТЬЮ решена. |
   |
 
|
|
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
|
Текстовая версия | Сейчас: 8.1.2009, 19:19 |
|
|