На этом шаге мы рассмотрим прием, позволяющий увеличить скорость отображения графических изображений.
Большинство веб-страниц содержат графические элементы, которые используются не только для украшения страниц, но и в качестве информационного наполнения: иллюстрированные каталоги товаров, схемы, чертежи, географические карты, фотогалереи и т. п. Если файлы с графикой велики и/или их много, то загрузка такой страницы в браузер может потребовать слишком много времени. Для ускорения загрузки используют специальные приемы. Так, нередко сначала загружают изображения с низким разрешением из небольших по объему файлов. На их основе создаются ссылки на файлы с графикой полноценного разрешения, которые загружаются только при щелчке на ссылке. Можно также использовать в теге <IMG> кроме атрибута SRC атрибут LOWSRC, позволяющий загрузить сначала изображение с низким разрешением, а затем, по мере приема, заменить ее рисунком с большим разрешением. Здесь мы рассмотрим способ ускорения загрузки графики, предоставляемый JavaScript.
С помощью сценария можно организовать предварительную загрузку изображений в кэш-память браузера, не отображая их на экране. Это особенно эффективно при начальной загрузке страницы. Пока изображения загружаются в память, оставаясь невидимыми, пользователь может рассматривать текстовую информацию, его не раздражает медленное появление графических элементов. В результате загрузка страницы не вызывает у пользователя отрицательных эмоций.
Для предварительной загрузки изображения следует создать его объект в памяти браузера. Такой объект несколько отличается от объекта изображения, создаваемого с помощью тега <IMG>. Как и все объекты, создаваемые сценариями, объект изображения не отображается в окне браузера. Однако его наличие в коде документа уже обеспечивает загрузку самого изображения при загрузке документа. Чтобы создать в памяти объект изображения, необходимо в сценарии выполнить следующее выражение:
myimg = new Image (<ширина>, <высота>);
Параметры функции-конструктора объекта определяют размеры изображения и должны соответствовать значениям атрибутов WIDTH и HEIGHT тега <IMG>, который используется для отображения предварительно загруженного изображения.
Для созданного в памяти объекта изображения myimg можно задать имя или, в общем случае, URL-адрес графического файла. Это делается с помощью свойства src:
myimg.src = "<URL-адрес изображения>";
Данное выражение предписывает браузеру загрузить в кэш-память указанное изображение, но не отображать его. После загрузки в кэш-память всех изображений и загрузки всего документа можно сделать их видимыми. Для этого нужно свойству src элемента <IMG> присвоить значение этого же свойства объекта изображения в кэш-памяти. Например:
document.images[0].src = myimg.src;
Здесь слева от оператора присвоения указано свойство src первого в документе элемента, соответствующего тегу <IMG>, а справа - свойство src объекта изображения в кэш-памяти.
Теперь рассмотрим в качестве примера HTML-документ, в котором отображается список названий графических элементов и одно исходное изображение (рисунок 1). Щелчок на элементе списка приводит к отображению соответствующего изображения. Все графические элементы из этого списка предварительно загружаются в кэш-память и поэтому быстро отображаются при выборе из списка. Список, как известно, создается с помощью контейнерного тега <SELECT>, содержащего теги <OPTION>. Соответствующий фрагмент HTML-кода мы сгенерируем с помощью сценария и запишем в текущий документ.
Вот текст HTML-документа.
<HTML> <HEAD> <TITLE>Загрузка изображений</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var imgFile = new Array(); //Массив имен графических файлов imgFile[0] = "best_road_big.jpg"; imgFile[1] = "best_robust_big.jpg"; imgFile[2] = "best_secure_big.jpg"; imgFile[3] = "connected_data_big.jpg"; var imgName = new Array(); //Массив названий картинок imgName[0] = "Картинка1"; imgName[1] = "Картинка2"; imgName[2] = "КартинкаЗ"; imgName[3] = "Картинка4"; //Создание объектов изображений и загрузка изображений в кэш var imgObj = new Array();//Иассив объектов изображений for(i = 0; i < imgFile.length; i++) { imgObj[i] = new Image(131, 155); // Создаем объект изображения imgObj[i].src = imgFile[i];//Загрузка рисунка в память без отображения } //Отображение изображения при выборе из списка function imgshow(list) { //Выбранный номер изображения var x = list.options[list.selectedIndex].value; document.all.img0.src = eval("imgObj["+ x + "].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 = "best_road_big.jpg" WIDTH=131 HEIGHT=155> </BODY> </HTML>
Результат просмотра этого документа в браузере изображен на рисунке 1.
Рис.1. Результат просмотра документа
Обратите внимание, что для преобразования строки в настоящую ссылку на объект используется функция eval(). HTML-код, определяющий список изображений и сгенерированный сценарием, выглядит следующим образом:
<SELЕСТ onchange = 'imgshow(this)'> <OPTION VALUE = 0>Картинка1 <OPTION VALUE = 1>Картинка2 <OPTION VALUE = 2>КартинкаЗ <OPTION VALUE = 3>Картинка4 </SELECT>
На следующем шаге мы рассмотрим работу с Cookie.
