Ожидание загрузки всех изображений
Если вы собираетесь разместить в своем документе 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;
