Webmaster Webdesigner + + Builder проектов

Вот "прелоадер", который будет загружать ваши страницы перед отображением содержимого. Это "прелоадер" отображает анимированные GIF изображения при загрузке с белым фоном.

Вот пример того, что она может дать, я бы посоветовал не использовать этот сценарий, если вы использовали "CSS Reset". И не использовать тег "DIV" Общие "CSS", используя позицию "относительно" для всех

Вот код Javascript на прелоадер.

 / / Вы можете изменить скорость (скорость) (1 == очень быстро)
 / / Вы можете изменить качество переходного периода (1 == лучшем случае)
 / / Переход является более качественным, более высокую скорость замедлилась и должна быть увеличена
 ; VAR скорость = 10;
 ; уаг переход = 10;

 / / Размер анимированных GIF прелоадер
 ; уаг GIFpreloadLargeur = 20;
 ; уаг GIFpreloadHauteur = 20;

 ; уаг таймер = 0;
 ; уаг непрозрачность = 100; 

 Непрозрачность функции ()
 {
     прозрачность = непрозрачность - переходный период;

     ( "preloader" ) . style ; уаг объект = документ GetElementById («прелоадер») стиле..
     opaciT / 100 ) ; . объект непрозрачность = (непрозрачность / 100);
     opaciT / 100 ) ; . объект MozOpacity = (непрозрачность / 100);
     opaciT / 100 ) ; . объект KhtmlOpacity = (непрозрачность / 100);
     + opaciT + ")" ; Объект фильтр = "альфа (непрозрачность =" + прозрачность + ")". 

	 opaciT <= 0 ) если (прозрачность <= 0)
	 {
		 "preloader" ) . style . visibility = "hidden" ; Документ GetElementById ("прелоадер") стиль видимость = "скрытые"...
		 ; clearInterval (таймер);
	 }

 }

 Функция предварительной нагрузки ()
 {
	 document. getElementById ) если (документ GetElementById)
	 {
		 "preloadIMG" ) . style . visibility = "hidden" ; Документ GetElementById ("preloadIMG") стиль видимость = "скрытые"...
		 ,speed ) ; Таймер = setInterval ("непрозрачность ()", скорость);
	 }

	 еще
	 {
	   	 document. layers ) если (документ слоев)
		 {
			 = "hidden" ; .. документ preloadIMG видимость = "скрытый";
			 ,speed ) ; Таймер = setInterval ("непрозрачность ()", скорость);
	     }
	         еще
		 {
			 . style . visibility = "hidden" ; Документ все preloadIMG стиль видимость = "скрытые"....
			 ,speed ) ; Таймер = setInterval ("непрозрачность ()", скорость);
		 }
	 }
 }

 / / Создание CSS для Preloader
 уаг myCSS;
 = MyCSS " 
  ; <style type= \" text/css \"> ";

 myCSS + = "HTML, BODY {высоты: авто; края: 0px; обивка: 0px;}";

 myCSS + = "{# прелоадер";
 myCSS + = "позицию: фиксированный;"
 myCSS + = "фонового цвета: белый";
 myCSS + = "Ширина: 100%;"
 myCSS + = "Высота: 100%;"
 myCSS + = "дисплей: блок";
 myCSS + = "г-индекс: 100000;"
 myCSS + = "}";

 myCSS + = "{preloadIMG #";
 myCSS + = "позицию: абсолютная;"
 myCSS + = "Слева направо: 50%;"
 ; myCSS + = "Ширина:" GIFpreloadLargeur + + "пикселей";
 ; myCSS + = "Высота:" GIFpreloadHauteur + + "пикселей";
 GIFpreloadLargeur / 2 ) + "px;" ; myCSS + = "маржа налево: -" + (GIFpreloadLargeur / 2) + "пикселей";
 myCSS + = "сверху: 150px;"
 myCSS + = "}";

 myCSS + = "</ стиль> 

  »;

 / / Записываем CSS
 ( myCSS ) ; . окна документа писать (myCSS).

 / / Исполнение
 ( ) { preload ( ) ; } . окна OnLoad = функция () {преднагрузку ();}

Теперь вставить этот код сразу после тега BODY. Обратите внимание, что "образ предварительной загрузки должна быть на вашем сервере и источник должен быть изменен в зависимости от« edroit где твоя картина.

 <div id="preloader">
 <div id="preloadIMG"> SRC = "loading.gif" <img alt="" /> </ div>
 </ Div>

Что ж, теперь у вас есть очень умные прелоадер для ваших веб-страниц тяжелым.

Теги: изображения , Javascript , Preloader , XHTML

Эта статья была опубликована среду, 13 Февраля 2008 в 20:19 и находится в рубриках Уроки . Вы можете следить за комментариями через RSS 2,0 корм . Вы можете оставить комментарий , или трекбек со своего сайта.