Картинка при загрузки страниц форума
- Автор темы lena1
- Дата начала
<b>Админцентр > ВНЕШНИЙ ВИД > Опции (в строке используемого стиля) > Изменить HTML шаблоны > skin_global (глобальные шаблоны) > global_board_header</b>
Вписываем в самом начале (или в любом месте описания функций Javascript) после <b><!--ipb.javascript.start--></b>:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><script type="text/javascript">
//<![CDATA[
var img = new Array();
function LoadingImg(id, url) {
img[id] = new Image();
img[id].src = url;
img[id].onload = function() {
document.getElementById(id).src = img[id].src;
}
}
//]]>
</script><!--c2--></div><!--ec2-->
Далее в шаблонах где прописываются теги <img src='Адрес картинки'> прописывать следующим образом:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><img id='1' src="style_images/<#IMG_DIR#>/folder_attach_images/attach_wait.gif">
<script type="text/javascript">LoadingImg(1, 'Адресс картинки')</script><!--c2--></div><!--ec2-->
Где в теге <img <b>id='1'</b>... Это идентификатор данной картинки и должен быть разный на каждую картинку. Этот же идентификатор прописывается первым параметром передаваемым функции LoadingImg(<b>1</b>, 'Адресс картинки')... а сам адрес картинки прописывается вторым параметром этой же функции...
На примере сделаем прелоадер картинок на аватары пользователей...
К сожалению тег <img> на аватары формируется не в шаблонах IPB, а в файле sources/ipsclass.php
Открываем файл <b>sources/ipsclass.php</b>
Находим строчку:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->return "<img src='{$this->vars['AVATARS_URL']}/{$member_avatar}' border='0' alt='' />";<!--c2--></div><!--ec2-->
Заменяем строчкой:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->return "<img id='{$member_avatar}' src='style_images/<#IMG_DIR#>/folder_attach_images/attach_wait.gif' border='0' alt='' />\n<script type='text/javascript'>LoadingImg('{$member_avatar}', '{$this->vars['AVATARS_URL']}/{$member_avatar}')</script>";<!--c2--></div><!--ec2-->
Вот вообщем то и все... Суть в том что каждой картинке, нужно присвоить свой ID и прописать Жаваскриптом вызов функции для загрузки указанной картинки, а в то время пока она грузится будет отображаться картинка ожидания <!--coloro:#FF8C00--><span style="color:#FF8C00"><!--/coloro-->style_images/<#IMG_DIR#>/folder_attach_images/attach_wait.gif<!--colorc--></span><!--/colorc-->
И еще я не уверен в корректоности такого способа. Он работает, но как-то даже не знаю... Вообщем бывает чето притормаживает. Но другого способа я пока не знаю.
Вписываем в самом начале (или в любом месте описания функций Javascript) после <b><!--ipb.javascript.start--></b>:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><script type="text/javascript">
//<![CDATA[
var img = new Array();
function LoadingImg(id, url) {
img[id] = new Image();
img[id].src = url;
img[id].onload = function() {
document.getElementById(id).src = img[id].src;
}
}
//]]>
</script><!--c2--></div><!--ec2-->
Далее в шаблонах где прописываются теги <img src='Адрес картинки'> прописывать следующим образом:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1--><img id='1' src="style_images/<#IMG_DIR#>/folder_attach_images/attach_wait.gif">
<script type="text/javascript">LoadingImg(1, 'Адресс картинки')</script><!--c2--></div><!--ec2-->
Где в теге <img <b>id='1'</b>... Это идентификатор данной картинки и должен быть разный на каждую картинку. Этот же идентификатор прописывается первым параметром передаваемым функции LoadingImg(<b>1</b>, 'Адресс картинки')... а сам адрес картинки прописывается вторым параметром этой же функции...
На примере сделаем прелоадер картинок на аватары пользователей...
К сожалению тег <img> на аватары формируется не в шаблонах IPB, а в файле sources/ipsclass.php
Открываем файл <b>sources/ipsclass.php</b>
Находим строчку:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->return "<img src='{$this->vars['AVATARS_URL']}/{$member_avatar}' border='0' alt='' />";<!--c2--></div><!--ec2-->
Заменяем строчкой:<!--c1--><div class='codetop'>Код</div><div class='codemain'><!--ec1-->return "<img id='{$member_avatar}' src='style_images/<#IMG_DIR#>/folder_attach_images/attach_wait.gif' border='0' alt='' />\n<script type='text/javascript'>LoadingImg('{$member_avatar}', '{$this->vars['AVATARS_URL']}/{$member_avatar}')</script>";<!--c2--></div><!--ec2-->
Вот вообщем то и все... Суть в том что каждой картинке, нужно присвоить свой ID и прописать Жаваскриптом вызов функции для загрузки указанной картинки, а в то время пока она грузится будет отображаться картинка ожидания <!--coloro:#FF8C00--><span style="color:#FF8C00"><!--/coloro-->style_images/<#IMG_DIR#>/folder_attach_images/attach_wait.gif<!--colorc--></span><!--/colorc-->
И еще я не уверен в корректоности такого способа. Он работает, но как-то даже не знаю... Вообщем бывает чето притормаживает. Но другого способа я пока не знаю.
<!--quoteo(post=69034:date=3.10.2007, 23:50:name=«$EGUR@»)--><div class='quotetop'>Цитата(«$EGUR@» @ 3.10.2007, 23:50) [snapback]69034[/snapback]</div><div class='quotemain'><!--quotec-->не совсем то... не на каждую картинку это нужно, а что бы этот кружок появлялся по середине экрана как загружается страничка<!--QuoteEnd--></div><!--QuoteEEnd-->
У-у-у-у-у... Блин! Чет даже не знаю. Не сталкивался с этим.
Можно попробовать в теге <body> прописывать событие onLoad (ну типа <body onLoad=''>) вот толька я пока не знаю что именно там прописывать. Это даже попроще сделать чем на каждую картинку, но нужно узнать как это сделать.
Нада поспрашивать на других форумах по програмированию... :unsure:
У-у-у-у-у... Блин! Чет даже не знаю. Не сталкивался с этим.
Можно попробовать в теге <body> прописывать событие onLoad (ну типа <body onLoad=''>) вот толька я пока не знаю что именно там прописывать. Это даже попроще сделать чем на каждую картинку, но нужно узнать как это сделать.
Нада поспрашивать на других форумах по програмированию... :unsure: