Ускоряем
загрузку графики
Многие начинающие
web-дизайнеры, разрабатывая свой первый самостоятельный проект, сталкиваются
иногда с весьма трудной задачей, связанной с отображением графики в
документах HTML. Проблема заключается в том, что согласно изученным
вами ранее «постулатам» web-дизайна каждый html-документдолжен
быть максимально компактным, тогда как большое количество иллюстраций,
появляющихся, например, при создании виртуального фотоальбома, значительно
перегружает файл, пропорционально увеличивая время его считывания с
сервера.
Решить эту проблему,
оптимизировав объем итогового html-документа, можно двумя методами.
Первый метод заключается в следующем. Создавая фотоальбом, подготовьте
две копии каждого изображения: одну — нормального размера и качества,
такую, которую вы и хотели бы поместить на свою web-страничку, вторую
— в уменьшенном масштабе и с низким разрешением. Разместите на web-странице
уменьшенные копии картинок, назначив для каждой из них свойства гиперссылки
с атрибутом TARGET="_blank", которая перенаправит пользователя
к большому графическому файлу. В документ вставьте пояснение для посетителей
о том, что щелчок кнопкой мыши на любом рисунке приведет к его загрузке
в отдельном окне броузера в увеличенном масштабе. Тогда пользователю,
не заинтересованному в разглядывании ваших фотографий, не придется подолгу
дожидаться окончания считывания странички с удаленного узла. Если же
он все-таки захочет полюбоваться на некоторые из опубликованных вами
иллюстраций, ему не составит труда выбрать наиболее интересные из них.
Такой подход к представлению графики в Интернете носит название «предварительного
просмотра», или, по-английски, «preview».
Если мы назовем файл,
содержащий уменьшенную копию картинки, picture1.jpg, а файл нормального
размера — picture2.jpg, то html-код гиперссылки, описанной выше, будет
выглядеть следующим образом:
<А HREF="picture2.jpg"
TARGET="_blank"><IMG SRC="../picture1.JPG"
WIDTH="100" HEIGHT="98" АLT="Уменьшенная картинка"
BORDER="0"></A>
Второй метод ускорения
загрузки графических файлов с сервера несколько отличается от предыдущего.
Если, предположим, ваш сайт содержит фото галерею, доступ к которой
открывается с пятой — шестой странички по счету, все содержащиеся в
ней графические файлы можно загрузить в клиентский компьютер заранее,
на предыдущих страницах, выводя их на экран размером 1x1пиксел. Код,
осуществляющий подобный вывод графики, выглядит так: <IMGSRC="URL
графического файла" WIDTH="1" HEIGHT="1">.
Изображение при этом станет невидимым для посетителя сайта, но сохранится
в кэше его машины, а при последующем открытии данной картинки она будет
загружаться уже с жесткого диска локального компьютера. Таким образом,
у пользователя создается впечатление, что изображение выводится на экран
очень быстро. Однако за все надо платить: время загрузки предыдущих
страниц при этом пропорционально увеличивается. Дабы посетитель вашего
сайта не скучал, в процессе выгрузки графики его можно развлечь чем-нибудь
другим: например, предложить почитать новости или подборку свежих анекдотов.
