Сценарии JavaScript в активных страницах Web

Ожидание загрузки всех изображений


Если вы собираетесь разместить в своем документе HTML анимационное изображение, состоящее из отдельных кадров, которые, в свою очередь, расположены в отдельных файлах, возникает одна проблема. Она связана с непредсказуемостью времени загрузки всех изображений анимационной последовательности через медленный и нестабильный канал Internet.

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

В листинге 5.3 мы привели исходный текст документа HTML со сценарием, который работает подобным образом.

Листинг 5.3. Файл chapter5/noise/noise2.html

<HTML>

  <HEAD>

    <TITLE>Animation with JavaScript</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

    <!--

    var nNumberOfImages = 18;

    var i=1;

    var bForward=true;

    var imgArray = new Array(18);



    function loadAllImages(nNumberOfImages)

    {

      var i;

      for(i=0; i<nNumberOfImages; i++)

      {

        imgArray[i] = new Image();

        imgArray[i].src = "img0" + (i+1) + ".gif";

      }

    }

    function showNextImage()

    {

      if(bForward)

      {

        i++;

        if(i>17)

        {

          bForward=false;

        }

      }

      else

      {

        i--;

        if(i<2)

        {

          bForward=true;

        }

      }

      document.Img.src = imgArray[i-1].src;

      setTimeout("showNextImage()", 100);

    }

    // -->

    </SCRIPT>

  </HEAD>

  <BODY BGCOLOR=white>

    <IMG SRC="img01.gif" NAME="Img">

    <SCRIPT LANGUAGE="JavaScript">

    <!--

      loadAllImages(nNumberOfImages);

      showNextImage();

    // -->

    </SCRIPT>

  </BODY>

</HTML>

В теле документа HTML расположен сценарий, вызывающий последовательно функции loadAllImages и showNextImage:


loadAllImages(nNumberOfImages);

showNextImage();

Функции loadAllImages в качестве параметра передается общее количество изображений в анимационной последовательности. В нашем случае оно равно 18.

Задача функции loadAllImages заключается в заполнении массива объектов класса Image. Этот массив определен в области заголовка нашего документа HTML:

var imgArray = new Array(18);

Заполнение массива выполняется в цикле:

var i;

for(i=0; i<nNumberOfImages; i++)

{

  imgArray[i] = new Image();

  imgArray[i].src = "img0" + (i+1) + ".gif";

}

Для каждого элемента массива вначале с помощью ключевого слова new создается объект класса Image, а затем устанавливается значение свойства src этого объекта. Последняя операция и приводит к инициированию загрузки файла изображения, выполняемой асинхронно.

После того как массив заполнен, можно вызывать функцию showNextImage. Она идентична описанной в предыдущем примере, за исключением того что для установки свойства src изображения Img используются элементы заранее подготовленного массива imgArray:

document.Img.src = imgArray[i-1].src;


Содержание раздела