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

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

Вот я и решил написать статью о том, как написать небольшой скрипт с использованием технологий 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",
       "background/line.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()"
Вот и вся работа.