Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 98 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Перманентная мультипликация может быть достигнута и другими средствами, например многокадровыми графически-
ми файлами. Однако движение на странице – не всегда благо. Часто возникает желание реализовать запуск и останов движе-
ния по требованию пользователя. Удовлетворим это желание, используя предыдущие примеры (запустить или остановить
мультипликацию):
var flag1=0;
function movie()
{
if(flag1==0)
{
eval("document.images[0].src='clock"+
i+".gif';");
i++;if(i>6) i=0;
}
setTimeout("movie();",500);
}
...
<BODY onLoad="movie();">
...
<FORM>
<INPUT TYPE=button VALUE="Start/Stop"
onClick="if(flag1==0) flag1=1; else flag1=0;">
</FORM>
В данном случае мы просто обходим изменение картинки, но при этом не прекращаем порождение потока. Если мы по-
местим setTimeout() внутрь конструкции if(), то после нажатия на кнопку Start/Stop поток порождаться не будет, и
запустить движение будет нельзя.
Существует еще один способ решения проблемы остановки и старта мультипликации. Он основан на применении мето-
да clearTimeout(). Внешне все выглядит по-прежнему, но процесс идет совсем по-другому:
var flag1=0;
var id1;
function movie()
{
eval("document.images[0].src='clock"+
i+".gif';");
i++;if(i>6) i=0;
id1 = setTimeout("movie();",500);
}
...
<BODY onLoad="movie();">
...
<FORM>
<INPUT TYPE=button VALUE="Start/Stop"
onClick="if(flag1==0)
{ id1=setTimeout('movie();',500); flag1=1;}
else {clearTimeout(id1); flag1=0;};">
</FORM>
Обратите внимание на два изменения. Во-первых, объявлен и используется идентификатор потока (id1); во-вторых,
применяется метод clearTimeout(), которому, собственно, идентификатор потока и передается в качестве аргумента.
Чтобы остановить воспроизведение функции movie(), достаточно "убить" поток.
При программировании графики следует учитывать множество факторов, которые влияют на скорость отображения
страницы и скорость изменения графических образов. При этом обычная дилемма оптимизации программ – скорость или
размер занимаемой памяти – решается только путем увеличения скорости. О размере памяти при программировании на
JavaScript думать как-то не принято.
Из всех способов оптимизации отображения картинок мы остановимся только на нескольких:
• оптимизация отображения при загрузке;
• оптимизация отображения за счет предварительной загрузки;
• оптимизация отображения за счет нарезки изображения.
Если первые две позиции относятся в равной степени как к отображению статических картинок, так и к мультиплика-
ции, то третий пункт характерен главным образом для мультипликации.
Практически в любом руководстве по разработке HTML-страниц отмечается, что при использовании тега IMG в теле
HTML-страницы следует указывать атрибуты WIDTH и HEIGHT. Это продиктовано порядком загрузки компонентов страни-
цы с сервера и алгоритмом работы HTML-парсера. Первым загружается текст разметки. После этого парсер разбирает текст

Страницы