Загрузка изображений. Управление процессами во времени

Как правило, веб-страницы содержат графические элементы, которые используются не только для украшения страниц, но и в качестве информационного наполнения: иллюстрированные каталоги товаров, схемы, чертежи, географические карты, фотогалереи и т. п. Если файлы с графикой велики и/или их много, то загрузка такой страницы в браузер может потребовать слишком много времени. Для ускорения загрузки используют специальные приемы. Так, нередко сначала загружают изображения с низким разрешением из небольших по объему файлов. На их основе создаются ссылки на файлы с графикой полноценного разрешения, которые загружаются только при щелчке на ссылке. Можно также использовать в теге <IMG> кроме атрибута SRC атрибут LOWSRC, позволяющий загрузить сначала изображение с низким разрешением, а затем, по мере приема, заменить ее рисунком с большим разрешением. Здесь мы рассмотрим способ ускорения загрузки графики, предоставляемый JavaScript.
С помощью сценария можно организовать предварительную загрузку изображений в кэш-память браузера, не отображая их на экране. Это особенно эффективно при начальной загрузке страницы. Пока изображения загружаются в память, оставаясь невидимыми, пользователь может рассматривать текстовую информацию, его не раздражает медленное появление графических элементов. В результате загрузка страницы не вызывает у пользователя отрицательных эмоций.

Для предварительной загрузки изображения следует создать его объект в памяти браузера. Такой объект несколько отличается от объекта изображения, создаваемого с помощью тега <IMG>. Как и все объекты, создаваемые сценариями, объект изображения не отображается в окне браузера. Однако его наличие в коде документа уже обеспечивает загрузку самого изображения при загрузке документа. Чтобы создать в памяти объект изображения, необходимо в сценарии выполнить следующее выражение:

myimg = new Image(ширина, высота)

Параметры функции-конструктора объекта определяют размеры изображения и должны соответствовать значениям атрибутов WIDTH и HEIGHT тега <IMG>, который используется для отображения предварительно загруженного изображения.
Для созданного в памяти объекта изображения myimg можно задать имя или, в общем случае, URL-адрес графического файла. Это делается с помощью свойства src:

myimg. src = "URL-адрес_изо6ражения"

Данное выражение предписывает браузеру загрузить в кэш-память указанное изображение, но не отображать его. После загрузки в кэш-память всех изображений и загрузки всего документа можно сделать их видимыми. Для этого нужно свойству src элемента <IMG> присвоить значение этого же свойства объекта изображения в кэш-памяти. Например:

document.images[0] .src = myimg.src

Здесь слева от оператора присвоения указано свойство src первого в документе элемента, соответствующего тегу <IMG>, а справа — свойство src объекта изображения в кэш-памяти.
Теперь рассмотрим в качестве примера HTML-документ, в котором отображается список названий графических элементов и одно исходное изображение. Щелчок на элементе списка приводит к отображению соответствующего изображения. Все графические элементы из этого списка предварительно загружаются в кэш-память и поэтому быстро отображаются при выборе из списка. Список, как известно, создается с помощью контейнерного тега <SELECT> содержащего теги <OPTION>. Соответствующий фрагмент HTML-кода мы сгенерируем с помощью сценария и запишем в текущий документ.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Загрузка изображений</title>
<script language="JavaScript">
var imgfile=new Array()
imgfile[0]="images/foto15.gif //массив имен графических файлов
imgfile[1]="images/foto23.gif"
imgfile[2]="images/foto24.gif"
imgfile[3]="images/foto26.gif"

var imgName=new Array() //массив названий картинок
imgName[0]="Картинка1"
imgName[1]="Картинка2"
imgName[2]="Картинка3"
imgName[3]="Картинка4"

/*Создание объектов изображений и загрузка изображений в кэш*/

var imgObj=new Array() //массив объектов изображений
for(i=0; i<imgfile.length; i++){
imgObj[i]=new Image(440,260)  //создание объекта изображений
imgObj[i].src=imgfile[i] /*загрузка картинки в память без изображения*/
}

function imgshow(list){ //отображение картинки при выборе из списка
var a=list.options[list.selectedIndex].value //выбранный номер картинки
document.all.img0.src=eval("imgObj["+a+"].src")
}

 /*Создание списка картинок*/
var clist="<select onchange='imgshow(this)'>"
for(i=0; i<imgfile.length;i++){
clist+="<option value="+i+">"+imgName[i]
}
clist+="</select>"
document.write(clist) //запись списка картинок в документ
</script>
</head>

<body>
<img id="img0"src="images/foto15.gif" width="440" height="260">
</body>
</html>

В веб-браузере это будет выглядеть ТАК.

Для преобразования строки в настоящую ссылку на объект используется функция eval(). HTML-код, определяющий список картинок, сгенерированный сценарием, выглядит следующим образом:

<select onchange='imgshow(this)'>

<option value=0>Картинка1

<option value=1>Картинка2

<option value=2>Картинка3

<option value=3>Картинка4

</select>

Управление процессами во времени

JavaScript имеет возможность периодически, через заданный интервал времени, запускать код (например, функцию) JavaScript. При этом создается эффект одновременного (параллельного) выполнения вычислительных процессов. Например, вы можете запустить несколько функций, перемещающих на экране различные видимые объекты. Эти объекты будут двигаться как бы одновременно. Иногда требуется организовать временную задержку перед выполнением какой-то функции, чтобы ранее начатый процесс успел завершиться. Все это относится к задачам управления вычислительными процессами во времени.
Для организации постоянного периодического (через заданный интервал времени) выполнения некоторого выражения или функции служит метод setInterval() объекта window. Этот метод имеет следующий синтаксис:

setInterval(выражение, период [, язык])

Первый параметр представляет собой строку, содержащую выражение (в частности, вызов функции). Второй параметр — целое число, указывающее временную задержку в миллисекундах перед последующими выполнениями выражения, указанного в первом параметре. Третий, необязательный параметр указывает язык, на котором написано выражение; по умолчанию — JavaScript.

Метод setInterval() возвращает некоторое целое число — идентификатор временного интервала, который может быть использован в дальнейшем для прекращения выполнения процесса, запущенного с помощью данного метода (см. ниже метод clearInterval()).
Пусть, например, требуется, чтобы некоторая функция myfunc() выполнялась периодически через 0,5 с. Тогда в сценарии следует записать следующее выражение:

setInterval ("myfunc()", 500)

Тот факт, что первый параметр метода setInterval() является строкой, обусловливает некоторые особенности передачи параметров периодически вызываемой функции. Если периодически вызываемая функция принимает параметры, то мы должны сначала сформировать строку, содержащую имя этой функции, круглые скобки, значения параметров и запятые между ними, а затем передать ее в качестве первого параметра методу setInterval(). В следующем примере показано, как передать методу setInterval() функцию с двумя параметрами, paraml и param2, значения которых определены в другом месте сценария:

var xstr = "myfunc(" + paraml + "," + param2 +")"
setInterval(xstr, 500)

Выражение, переданное методу setInterval(), будет периодически выполняться сколь угодно долго. Если это выражение осуществляет, например, приращение координат какого-нибудь видимого элемента то этот элемент будет перемещаться в окне браузера.
Для остановки запущенного временного процесса служит метод

clearInterval (идентификатор)

который принимает в качестве параметра целочисленный идентификатор, возвращаемый соответствующим методом setInterval(), например:

var myproc = setInterval ("myfunc () , 100")
if (confirm("Прервать процесс ?"))
clearInterval (myproc)

Чтобы выполнить выражение с некоторой временной задержкой, используется метод setTimeout(). Этот метод объекта window имеет следующий синтаксис:

setTimeout(выражение, задержка [, язык])

Первый параметр представляет собой строку, содержащую выражение (в частности, вызов функции). Второй параметр — целое число, указывающее временную задержку в миллисекундах выполнения выражения, указанного в первом параметре. Третий, необязательный параметр указывает язык, на котором написано выражение; по умолчанию — JavaScript.

Метод setTimeout() возвращает некотоpoе целое число — идентификатор временного интервала, который может быть использован в дальнейшем для отмены задержки выполнения процесса, запущенного с помощью метода.
Пусть, например, требуется, чтобы некоторая функция myfunc() выполнялась спустя 1 с. Тогда в сценарии следует записать следующее выражение:

setTimeout("myfunc()", 1000)

Для отмены задержки процесса, запущенного с помощью метода setTimeout() используется метод

clearTimeout(идентификатор)

который принимает в качестве параметра целочисленный идентификатор, возвращаемый соответствующим методом setTimeout.

В следующем HTML-документе имеются две кнопки. Щелчок на кнопке Пуск открывает через 5 с новое окно и загружает в него документ. Однако это действие можно отменить с помощью кнопки Отмена, если щелкнуть на ней, пока окно еще не открыто:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование временной задержки</title>
</head>

<body>
<button id="start" value="Пуск">Пуск</button>&nbsp;&nbsp;
<button id="stop" value="Отмена">Отмена</button>
<script language="JavaScript">
var mypros
function start.onclick(){
mypros=setTimeout("window.open('images/foto22.gif')",5000)
}
function stop.onclick(){
clearTimeout(mypros)
}

</script>
</body>
</html>

В веб-браузере это будет выглядеть ТАК.

А теперь создадим последовательность автоматически сменяющихся изображений.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Каледоскоп. Смена изображений</title>
</head>

<body>
<h2>Осенние пейзажи</h2>
<img id="prg" src="images/foto34.gif" width="440" height="260">
<script language="JavaScript">

imgs=new Array
imgs[0]="images/foto34.gif"
imgs[1]="images/foto33.gif"
imgs[2]="images/foto32.gif"
imgs[3]="images/foto31.gif"
imgs[4]="images/foto30.gif"
imgs[5]="images/foto29.gif"
imgs[6]="images/foto28.gif"
imgs[7]="images/foto27.gif"
imgs[8]="images/foto26.gif"
imgs[9]="images/foto25.gif"
imgs[10]="images/foto24.gif"
imgs[11]="images/foto23.gif"

setTimeout('next()',5000)
var i=1
function next(){
document.all.prg.src=imgs[i];
i++;
if(i>=imgs.length)
{i=0}

setTimeout('next()',5000)
}

</script>
</body>
</html>

В веб-браузере это будет выглядеть ТАК.



  • Другие |
назадвверхвперед
Rambler's Top100