2015-04-30
653
При решении предыдущих задач новое изображение загружается на страницу после того, как изменилось значение параметра src. Загрузка изображения из сети может занимать некоторое время, иногда довольно значительное.
Если изображений на странице много, либо велик их размер, то разумно воспользоваться техникой предварительной загрузки изображения. При предварительной загрузке браузер “подготовит” изображения, которые затем потребуются для размещения на странице, т.е. заблаговременно загрузит изображения в память компьютера, не дожидаясь непосредственного обращения к этим изображениям.
Позаботиться о предварительной загрузке изображений придется самому пользователю, написав соответствующие строки сценария. Как это сделать продемонстрируем при решении следующей задачи.
Просмотр рисунков с предварительной загрузкой
Напишем сценарий, который позволяет последовательно просматривать изображения, переходя либо к предыдущему, либо к следующему изображению с помощью кнопок (см. рис. 4.8)
|
|
|
Рис. 4.8. Последовательный просмотр рисунков
HTML- код документа со сценарием последовательного просмотра рисунков, приведен в листинге 4.8.
| Листинг 4.8. Последовательный просмотр рисунков с предварительной загрузкой |
<html>
<head>
<title>Последовательная смена изображений</title>
</head>
<script language="JavaScript">
// предварительная загрузка изображений
numimg=0
imgslide=new Array()
imgslide[0]=new Image()
imgslide[1]=new Image()
imgslide[2]=new Image()
imgslide[3]=new Image()
imgslide[0].src="sl1.gif"
imgslide[1].src="sl2.gif"
imgslide[2].src="sl3.gif"
imgslide[3].src="sl4.gif"
//последовательная смена изображений
function dem(n)
{ if (n == 1)
{ numimg++
if(numimg==4)
numimg=0;
}
else
{numimg--
if(numimg==-1)
numimg=3;
}
document.images[0].src=imgslide[numimg].src
}
</script>
</head>
<body bgcolor="#FFFFFF"">
<h4>Предыдущее и cледующее изображения</h4>
<img src="sl1.gif" width="100" height="100">
<form name =form1>
<input type=button value=Предыдующее onClick="dem(0)">
<input type=button value=Следующее onClick="dem(1)">
</form></body></html>
Чередование изображений с предварительной загрузкой
Напишем сценарий, при выполнении которого после загрузки страницы реализован визуальный эффект чередования изображений: на странице через равные промежутки времени появляются различные изображения.
Чтобы предварительно загрузить изображения, создадим массив imgslide: imgslide = new Array(). Каждый элемент массива представляет собой объект Image, который создается с помощью конструктора: new Image(). Первый элемент массива определяется так: imgslide[0] = new Image(). Свойство src только что созданного объекта задается в результате выполнения оператора присваивания: imgslide[0].src = ”sl1.gif”
Аналогично формируются и другие элементы массива. При работе сценария происходит обращение к элементам массива, и дополнительная загрузка изображений уже не потребуется. Приведем HTML код документа, содержащего сценарий решения задачи, в листинге 4.9.
|
|
|
| Листинг 4.9. Чередование изображений с предварительной загрузкой |
<html>
<head>
<title>Чередование изображений с предварительной загрузкой</title>
</head>
<script language="JavaScript">
// предварительная загрузка изображений
numimg=0
imgslide=new Array()
imgslide[0]=new Image()
imgslide[1]=new Image()
imgslide[2]=new Image()
imgslide[3]=new Image()
imgslide[0].src="sl1.gif"
imgslide[1].src="sl2.gif"
imgslide[2].src="sl3.gif"
imgslide[3].src="sl4.gif"
// чередование изображений
function demoslides()
{ document.images[0].src=imgslide[numimg].src
numimg++
if(numimg==4)
numimg=0;
setTimeout("demoslides()", 1000)
}
</script>
<body bgcolor="#FFFFFF" onLoad="demoslides()">
<p><img src="slidimg1.gif" width="100" height="100"></p>
</body>
</html>
В предыдущей задаче разные изображения появлялись на одном и том же месте на странице. Немного усложним задачу.
Движение изображения слева направо
Напишем сценарий реализации простой анимации: перемещение изображения слева направо.
Для анимационного изображения будем использовать всего два рисунка. Первый рисунок – то изображение, которое перемещается. Второй рисунок должен соответствовать “пустому” изображению. Для этого можно, например, создать одноцветный рисунок в формате GIF такого же размера, как и движущееся изображение. Для определенности будем считать, что имеется m кадров. Пусть n номер кадра, в который помещается изображение. В следующий момент времени, в кадр с номером n следует поместить “пустой” рисунок, в кадр с номером n+1 изображение. Тем самым как бы переместили изображение из кадра с номером n в кадр с номером n+1 и создали эффект движения слева направо. Когда изображение появится в последнем кадре, его следует переместить в первый кадр. Выражение document.images.length определяет количество кадров. Сразу после загрузки документа изображение расположено в самом левом кадре. В остальных кадрах располагается “пустое” изображение.
| Листинг 4.10. Движение изображения слева направо |
<HTML>
<HEAD>
<TITLE>Простая анимация</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- //
var stop=100
var n= 1 // номер кадра, куда вставляется изображение
var d= document
// предварительная загрузка изображений
imgempty = new Image()
imgempty.src = "p0.gif"
imganim = new Image()
imganim.src = "p1.gif"
// функция, осуществляющая анимацию
function anim1 ()
{ var len= d.images.length
if (n!= stop)
{ n = n+1
if (n > len)
{ n=1;
d.images[n-1].src=imganim.src
d.images[len-1].src=imgempty.src
}
else
{ d.images[n-2].src=imgempty.src
d.images[n-1].src= imganim.src
}
setTimeout("anim1()",500)
}
}
// функция для задания начальной позиции
function st ()
{ d.images[0].src=imganim.src
for (var i=1; i <= d.images.length-1; i++)
d.images[i].src= imgempty.src
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<h4 align=center>Простая анимация <h4>
<hr>
<img src=p1.gif>
<img src=p0.gif><img src=p0.gif><img src=p0.gif><img src=p0.gif>
<img src=p0.gif><hr>
<FORM name="form1">
<input type="button" value=Начало onClick= "n = stop; st()">
<input type="button" value=Запустить onClick= "n=1; anim1()">
</FORM></BODY></HTML>
При выполнении сценария перемещение изображения происходит небольшими скачками. Эти скачки можно сделать плавней, если увеличить число кадров на странице. Другой способ - использование набора картинок, которые отражают при движении промежуточное состояние, соответствующее моменту, когда изображение переходит из одного кадра в другой. Чем больше кадров и чем точнее набор рисунков, тем плавней будет казаться движение по странице.
