8. Объект Image. Кох С. Введение в JavaScript. 1997 (Германия)

Изображения на web-странице

Рассмотрим теперь объект Image, который стал доступен, начиная с версии с 1.1 языка JavaScript (т.е. с Netscape Navigator 3.0). С помощью объекта Image Вы можете вносить изменения в графические образы, присутствующие на web-странице. В частности, это позволяет нам создавать мультипликацию.

Заметим, что пользователи браузеров более старых версий (таких как Netscape Navigator 2.0 или Microsoft internet Explorer 3.0 - т.е. использующих версию 1.0 языка JavaScript) не смогут запускать скрипты, приведенные в этой части описания. Или, в лучшем случае, на них нельзя будет получить польный эффект.

Давайте сначала рассмотрим, как из JavaScript можно адресоваться к изображениям, представленным на web-странице. В рассматриваемом языке все изображения предстают в виде массива. Массив этот называется images и является свойством объекта document. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, 2-е - номер 1 и т.д. Таким образом, к 1-му изображению мы можем адресоваться записав document.images[0].

Каждое изображение в HTML-документе рассматривается в качестве объекта Image. Объект Image имеет определенные свойства, к которым и можно обращаться из языка JavaScript. Например, Вы можете определить, который размер имеет изображение, обратившись к его свойствам width и height. То есть по записи document.images[0].width Вы можете определить ширину 1-го изображения на web-странице (в пикселах).

К сожалению, отслеживать индекс всех изображений может оказаться затруднительным, особенно если на 1 странице у Вас их довольно много. Эта проблема решается назначением изображениям своих собственных имен. Так, если Вы заводите изображение с помощью тэга

<img src=img.gif name=myImage>

то Вы сможете обращаться к нему, написав document.myImage или document.images["myImage"].

Загрузка новых изображений

Хотя конечно и хорошо знать, как можно получить размер изображения на web-странице, это не совсем то, чего бы мы хотели. Мы хотим осуществлять смену изображений на web-странице и для этого нам понадобится атрибут src. Как и в случае тэга img, атрибут src содержит адрес представленного изображения. Теперь - в языке JavaScript 1.1 - Вы имеете возможность назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с этого нового адреса, заменив на web-странице старое. Рассмотрим к примеру запись:

<img src=img1.gif name=myImage>

Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое - img2.gif:

document.myImage.src="img2.src";

При этом новое изображение всегда получает тот же размер, что был у старого. И Вы уже не можете изменить размер поля, в котором это изображение размещается.

Упреждающая загрузка изображения

1 из недостатков такого подхода может заключаться в том, что после записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В некоторых ситуациях это допустимо, однако часто подобные задержки неприемлемы. И что же мы можем сделать с этим? Конечно, решением проблемы была бы упреждающая загрузка изображения. Для этого мы должны создать новый объект Image. Рассмотрим следующие строки:

hiddenImg=new Image();hiddenImg.src="img3.gif"

В первой строке создается новый объект Image. Во 2-й строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Как мы уже видели, запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется 2-я строка нашего примера, начинает загружаться изображение img2.gif. Но как подразумевается самим названием hiddenImg ("скрытая картинка"), после того, как браузер закончит загрузку, изображение на экране не появится. Оно будет лишь будет сохранено в памяти компьютера (или точнее в кэше) для последующего использования. Чтобы вызвать изображение на экран, мы можем воспользоваться строкой:

document.myImage.src= hiddenImg.src;

Но теперь изображение уже немедленно извлекается из кэша и показывается на экране. Таким образом, сейчас мы управляли упреждающей загрузкой изображения.

Конечно браузер должен был к моменту запроса закончить упреждающую загрузку, чтобы необходимое изображение было показано без задержки. Поэтому, если Вы должны предварительно загрузить большое количество изображений, то может иметь место задержка, поскольку браузер будет занят загрузкой всех картинок. Вы всегда должны учитывать скорость связи с Интернет - загрузка изображений не станет быстрее, если пользоваться только что показанными командами. Мы лишь пытаемся чуть раньше загрузить изображение - поэтому и пользователь может увидеть их раньше. В результате и весь процесс пройдет более гладко.

Если у Вас есть быстрая связь с Интернет, то Вы можете не понять, к чему весь этот разговор. О какой задержке все время говорит этот парень? Прекрасно, но еще остаются люди, имеющие более медленный модем, чем 14.4 (Нет, это не я. Я только что заменил свой на 33.6, да …).

Изменение изображений в связи с событиями, инициируемыми самим читателем

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

Исходный код этого примера выглядит следующим образом:

<a href=# onMouseOver=document.myImage2.src='img2.gif' onMouseOut=document.myImage2.src='img1.gif'><img src=img1.gif name=myImage2></a>

При этом могут возникнуть следующие проблемы:

<script><!--hide
//у нас браузер с поддержкой JavaScript
var browserOK=false;
var pics//--></script>
<script><!--hide
//браузер с поддержкой JavaScript 1.1!
browserOK=true;
pics=new Array()//--></script>
<script><!--hide
var objCount=0;//количество изображений на web-странице
function preload(name,first,second){
//предварительная загрузка изображений и размещение их в массиве
if(browserOK){
pics[objCount]=new Array(3);
pics[objCount][0]=new Image();
pics[objCount][0].src=first;
pics[objCount][1]=new Image();
pics[objCount][1].src=second;
pics[objCount][2]=name;
objCount++}}
function on(name){
if(browserOK){
for(i=0;i<objCount;i++){
if(document.images[pics[i][2]]!=null)
if(name!=pics[i][2]){
//вернуть в исходное систояние все другие изображения
document.images[pics[i][2]].src=pics[i][0].src}else{
//показывать 2-ю картинку, поскольку курсор пересекает данное изображение
document.images[pics[i][2]].src=pics[i][1].src}}}}
function off(){
if(browserOK){
for(i=0;i<objCount;i++){
//вернуть в исходное систояние все изображения
if(document.images[pics[i][2]]!=null)
document.images[pics[i][2]].src=pics[i][0].src}}}
//заранее загружаемые изображения - Вы должны здесь указать изображения, которые нужно загрузить заранее, а также объект Image, к которому они относятся (1-й аргумент). Именно эту часть нужно корректировать, если Вы хотите использовать скрипт применительно к другим изображениям (конечно это не освобождает Вас от обязанности подредактировать в документе также и раздел body)
preload("link1","img1f.gif","img1t.gif");
preload("link2","img2f.gif","img2t.gif");
preload("link3","img3f.gif","img3t.gif")//--></script>
//Здесь вам необходимо указать изображения - чобы onMouseOver и onMouseOut Вам необходимо использовать ссылки, поскольку сами изображения не могут работать с процедурами обработки событий
<a href=link1.php onMouseOver=on('link1') onMouseOut=off()>
<img name=link1 src=link1f.gif></a>
<a href=link2.php onMouseOver=on('link2') onMouseOut=off()>
<img name=link2 src=link2f.gif></a>
<a href=link3.php onMouseOver=on('link3') onMouseOut=off()>
<img name=link3 src=link3f.gif></a>