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

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

Специальные вопросы загрузки графики в браузер более подробно описаны в книге Вадима Дунаева "Самоучитель JavaScript". Здесь я привожу лишь некоторые основные сведения об этом несложном, но очень важном вопросе.

Если файлы с графикой велики и/или их много, то загрузка страницы в браузер может потребовать слишком много времени. Для ускорения загрузки используют специальные приемы.

Типовой прием заключается в том, чтон сначала загружают изображения с низким разрешением из небольших по объему фалов. На их основе создаются ссылки на файлы с графикой полноценного разрешения, которые загружаются только при щелчке на ссылке. Можно также использовать в тэге < IMG>, кроме атрибута SRC, атрибут LOWSRC, позволяющий загрузить сначала изображение с низким разрешением, а затем, по мере приема, заменить его картинкой с большим разрешением.

Здесь мы рассмотрим способ ускорения загрузки графики, предоставляемый JavaScript.

С помощью сценария можно организовать предварительную загрузку изображений в кэш-память браузера, не отображая их на экране. Отображение произойдет потом, когда браузер загрузит соответствующие тэги < IMG>. Это особенно эффективно при начальной загрузке страницы. Пока изображения загружаются в память, оставаясь невидимыми, пользователь может рассматривать текстовую информацию.

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

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

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

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

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

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

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

<HTML> <HEAD> <SCRIPT> var imgFile = new Array() // массив имен графических файлов imgFile[0] = "pict1.jpg" imgFile[1] = "pict2.jpg" imgFile[2] = "pict3.jpg" imgFile[3] = "pict4.jpg" 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(150, 100) // создаем объект изображения 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> <! Исходная картинка> <IMG ID = "img0" SRC = "pict0.jpg" WIDTH=150 HEIGHT=100> </html>

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

<SELECT onchange = 'imgshow(this)'> <OPTION VALUE = 0>Картинка1 <OPTION VALUE = 1>Картинка2 <OPTION VALUE = 2>Картинка3 <OPTION VALUE = 3>Картинка4 </SELECT>

Ниже приводится пример работы того, что описано выше:

Начало Web-дизайн Графика Книги АФП Разное