|
||||||||||||||
| <Добавить в Избранное> <Сделать стартовой> <Реклама на сайте> <Контакты> | ||||||||||||||
|
||||||||||||||
| ||||||||||||||
|
| ||||||||||||||
|
| ||||||||||||||
Интернет технологии -> JavaScript -> Предварительная загрузка рисунков и перекат | ||||||||||||||
Предварительная загрузка рисунков ( preload ) и перекат ( rollover )ВступлениеЕсли у вас есть серия изображений для предзагрузки, то вы можете воспользоваться функцией preLoad, которую я написал для подобных ситуаций, которая проста в работе и не требует каких-либо модификаций для работы функции переката ( rollover ).function preLoad()
{
if(document.images)
{
var argLen = arguments.length;
for(var i = 0; i < argLen; i++)
{
var arg = arguments[i];
var sufLen = suffix.length;
for(j = 0; j > sufLen; j++)
{
var suf = suffix[j]
self[arg + '_' + suf] = new Image();
self[arg + '_' + suf].src = iPath + arg + '_' + suf + '.' + iExt;
}
}
loaded = true;
}
}
Первая переменная, - iPath, - указывает путь к каталогу, который содержит изображения. Путь может быть абсолютный, относительный или указанный относительно корневой директории. Вторая переменная, - iExt, - является расширением файла всех изображений. Около 99% времени мы тратим на загрузку изображений, которые формируют навигационную панель или используются в подобных целях. Вероятнее всего, расширение всех файлов будет одинаковым для всех изображений. В случае необходимости, лишь минимум усилий необходимо будет для изменения этого расширения. Третья переменная, loaded, содержит булевское значение, которое указывает, действительно ли функция preLoad () вызвана , и изображения были загружены. Без этого, ваши изображения, которые вы используете в функции rollOver () не будет существовать, и если пользователь наведет курсор мыши на такую картинку до завершения загрузки страницы, вы получите сообщение об ошибке. Проверяя значения загруженной переменной в функции rollOver (), мы предотвращаем появление этой ошибки. Четвертая переменная, suffix, фактически является массивом. В нем определяется префикс, который добавится к имени изображения, чтобы обозначить состояние, в котором изображение находится. Для моей задачи достаточно двух префиксов-on и off. Если вам для загрузки требуется более, чем два префикса, достаточно просто добавить общее количество состояний, в которых Вы нуждаетесь. Что бы заставить это все работать, осталось сделать последний шаг-загрузить изображения. Вы можете сделать это несколькими путями. Единственное, что надо сделать-это составить список имен изображений для функции preLoad (), используемый как аргумент, для всех изображений, которые вам необходимо загрузить. Так, если необходимо загрузить изображения about, product, order, contact, и faq с префиксами on и off, то возможны следующие варианты:
Примечание: вышеупомянутый блок кода с функцией preLoad () предзагрузит файлы с префиксами on и off только для изображения about. Никакие другие изображения, нуждающиеся в предзагрузке, загружены не будут. Фокус состоит в том, чтобы добавить функцию preLoad (this.name) к каждому объекту, имеющему перекат (rollover), и следовательно нуждающемуся в предзагрузке изображений, связанных с ним. Теперь, для того чтобы увидеть, как будет работать этот способ предзагрузки по сравнению со старым, приведем пример использования старого метода для тех же пяти ссылок, указанных выше. if(document.images)
{
about_on = new Image();
about_on.src = 'images/about_on.gif';
about_off = new Image();
about_off.src = 'images/about_off.gif';
product_on = new Image();
product_on.src = 'images/product_on.gif';
product_off = new Image();
product_off.src = 'images/product_off.gif';
order_on = new Image();
order_on.src = 'images/order_on.gif';
order_off = new Image();
order_off.src = 'images/order_off.gif';
contact_on = new Image();
contact_on.src = 'images/contact_on.gif';
contact_off = new Image();
contact_off.src = 'images/contact_off.gif';
faq_on = new Image();
faq_on.src = 'images/faq_on.gif';
faq_off = new Image();
faq_off.src = 'images/faq_off.gif';
}
Сравнив этот метод с вышеупомянутым и увидев, насколько просто можно обеспечить предзагрузку всех изображений с необходимыми префиксами, я уверен, что вы поймете преимущество использования функции preLoad (). Приведем пример функции rollOver (): function rollOver(iName, iState)
{
if(document.images && loaded)
{
document.images[iName].src = self[iName + '_' + iState].src;
}
}
Вызвать эту функцию можно из html-документа: <a href="about.html" onMouseover="rollOver('about', 'on')"
onMouseout="rollOver('about', 'off')">
<img name="about" src="images/about_off.gif"
height="25" width="75" border="0" alt="About"></a>
Есть три важных детали, которые следует отметить при рассмотрении вышеуказанного кода.
Источник: www.woweb.com |
| ||||||||||||||
|
|
|||||||
| При цитировании и перепечатке ссылка на www.compdoc.ru обязательна. Карта сайта. |