Главная страница статей --> Хитрости при программировании php, заметки по базам данных

Скрытая загрузка

Источник: realcoding.net

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

Вот я и решил написать статью о том, как написать небольшой скрипт с использованием технологий DHTML, который бы загружал всю графику на страничке скрыто, а потом показывал бы ее во всей красе.

Давай те сразу же начнем разбирать, как бы нам написать такой скрипт.

Сделаем скрипт более простым, разобьем его на две процедуры.

Первая процедура должна прятать контекст странички и выводить информацию пользователю, - мол, подождите некоторое время, страничка загружается. Вторая процедура должно будет загружать всю графику, которая использует наша страничка.


Первая процедура

Как и было написано ранее это процедура прячет контекст страничке и выводит сообщение.

<SCRIPT language=javascript><br>
<!--<
br>
  var
nn4 = document.layers ? true:false;
  var
ie4 = document.all ? true:false;

    function
hideContent()
    {
     if (
document.all)
    {
      
document.all.showContent.style.visibility = hidden;
    }
    }

      if (
ie4)
       {
        var
html;
html = <div id=showContent style=position: absolute; left:0px;
top:0px; z-index:200; width:1024; height:768;>
html += <table width=1024 height=768 border=0
cellspacing=10 cellpadding=10 bgcolor=#F6F8F9>
html += <tr>
html += <td align=left valign=top>
html += <span class=bold>woscripts.com</span><br><span class=smalltext>
Идет загрузка графики... пожалуйста<b>подождите</b></span>
html += </td>
html += </tr>
html += </table>
html += </div>
<br>
       
document.write(html);
       }
//-->
</SCRIPT>

Вторая процедура

Вторая процедура подгружает графику, которая используется на страничке. В создаваемый массив preloadImages вы должны прописать графику (картинки) и которые должны загружаться на странички (лого, баннеры и.т.д.). Вы должны указать полный путь к каждому графическому файлу (картинки) ниже приведены примеры. Например: image/logo.gif - из каталога image загружаем графический файл (картинку) logo.gif

<SCRIPT language=JavaScript>
<!--
   var
nn4 = document.layers ? true:false;
   var
ie4 = document.all ? true:false;

    function
Loadz() {
     if (
ie4)
      {
       <
b>var preloadImages</b> = new Array(background.gif,
      
???????_???_????????/????????.gif,
      
links/wolinks.gif,
      
logo.gif,
      
banner.gif);

      var
i;
      var
imageLoaded = new Array()

      for (
i=0; i<preloadImages.length; i++)
        {
         
imageLoaded[i] = new Image();
         
imageLoaded[i].src = preloadImages[i];
        }
      }
    }

//-->
</SCRIPT>

Итак процедуры написаны, теперь нам нужно внедрить этот код в html.

Подключение процедура

Эти две процедуры должны обязательно, находится в файле индексе (index.htm, Index.html и.т.д.) то есть с того файла, который начинает загрузку вашего сайта. Вставляем в индекс файл написанные нами процедуры до ключа BODY, лучше всего это сделать сразу после META-тэгов. Записываем в ключ BODY вызовы на наши процедуры : onload="loadz(); hideContent()"
Вот и вся работа.



Похожие статьи:
- Ключевые слова - теория
- Отправка писем при помощи PHP-Прикрепление файла
- Обработка ошибок в PHP
- Как правильно раскрутить сайт?
- Защити себя сам - Firewall
- Предварительная загрузка рисунков (preload) и перекат (rollover)
- Маленькие хитрости JavaScript
- Параметры строки (GET) в Javascript
- Вызываем ветер (скрипты)
- 10 минут для SEO (search engine optimization)
- Защищаем контент сайта
- Генерация Flash на веб-сервере в PHP
- Проверка почтового адреса


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |

Контакты
Редакция:
[0.001]