Использование вспомогательных изображений с низким разрешением
Ранее в этой главе мы обсуждали проблему медленной передачи больших изображений на компьютер пользователя. Вы уже знаете, что эту проблему можно решить в некоторой степени установкой чересстрочного или прогрессивного режимов выгрузки. Другой подход состоит в использовании копий изображений с низким разрешением.
Например, мы можем установить такой режим, при котором копия изображения будет отображаться в окне обозревателя до тех пор, пока на компьютер пользователя не будет полностью выгружен высококачественный оригинал. После того как выгрузка будет завершена, оригинал заменит копию в окне обозревателя. Такой режим задается с помощью атрибута lowsrc.
1.Прежде всего создайте копию изображения с низким разрешением. Для этого откройте исходный файл в графическом редакторе, например в Adobe Photoshop. Сохраните изображение в формате, поддерживаемом обозревателями Интернет, например: MyImage.jpg.
2. Теперь, насколько возможно, сократим размер графического файла. Для этого уменьшим разрешение до 72 dpi, пропорционально уменьшим линейные размеры изображения и выполним индексирование цветов. Все эти операции уже выполнялись ранее в этой главе, в разделе «Выбор размера изображения». Результат сохраните в файле с новым именем, например: MyImage_lowres.gif.
3. Добавьте изображение на Web-страницу с помощью дескриптора
<IMG src='Mylmage.jpg' lowsrc='Mylmage_lowres.gif' width='100' height='75'>
Данный код HTML будет выполняться следующим образом. Сначала в окне обозревателя появится изображение с низким разрешением MyImage_lowres.gif.Одновременно в фоновом режиме будет продолжаться выгрузка большого файла MyImage.jpg.Как только выгрузка завершиться, изображение из файла Mylmage.jpgзаменит собой в окне обозревателя копию из файла Mylmage_lowres. gif.
Обязательно в коде дескриптора <IMG> следует установить с помощью атрибутов width и height размеры основного изображения. Если оставить эти атрибуты неустановленными, то обозреватель вычислит размер копии изображения с низким разрешением, после чего сожмет основное изображение до такого же размера.
Атрибут lowsrc поддерживается не всеми обозревателями. В таких обозревателях на экран сразу будет выводиться изображение, присвоенное атрибуту src.
Данный подход можно использовать для создания простых эффектов анимации. Атрибутам src и lowsrc можно назначить разные изображения с одинаковым разрешением, например: кошки и собаки или стоящего и идущего человека. Тогда в окне обозревателя сначала появится изображение из файла, присвоенного атрибуту lowsrc. Затем это изображение будет плавно заменено изображением из файла, присвоенного атрибуту src.
Другая возможность использования копий рисунков с низким разрешением состоит в том, чтобы поместить их на Web-странице и назначить им гиперссылки на исходные изображения. Причем можно ссылаться как на другую Web-страницу, содержащую исходное изображение, так и на сам графический файл, как в следующем примере:
<А href='MyImage.jpg' title='Щелкните на этой миниатюре, чтобы посмотреть фотографию с высоким разрешением'><IMG src='Mylmage_lowres.gif' ></А>
Если гиперссылка указывает на графический файл в формате, поддерживаемом обозревателем, то обозреватель автоматически отобразит содержимое файла в новом окне.
Данный способ использования копий изображений с низким разрешением чрезвычайно популярен при разработке электронных фотоальбомов. Пример такого фотоальбома показан на рис. 6.10.
Снабжайте графические гиперссылки подробными экранными подсказками с названием и кратким описанием открываемой фотографии. Назначайте текст подсказки атрибутуtitleгиперссылки.
Рис. 6.10. Пример фотоальбома с миниатюрными изображениями фотографий в качестве гиперссылок
Дата добавления: 2016-01-29; просмотров: 764;