Предварительная загрузка рисунков ( 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 () через обработчик события onLoad
<body onLoad="preLoad('about','product','order','contact','faq')">
- Вызов функции через обработчик события window.onload в пределах
блока <script>, вызывающего функцию preLoad ().
function onLoad()
{
preLoad('about', 'product', 'order', 'contact', 'faq');
}
window.onload = onLoad;
- Вызов функции preLoad () через обработчик события onLoad для каждого
изображения, к которому будет применена функция rollOver.
<a href="about.html"
onMouseover="rollOver('about', 'on')"
onMouseout="rollOver('about', 'off')">
<img name="about" src="images/about_off.gif"
onLoad="preLoad(this.name)" height="25"
width="75" border="0" alt="About"></a>
Примечание: вышеупомянутый блок кода с функцией 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>
Есть три важных детали, которые следует отметить при рассмотрении
вышеуказанного кода.
- Атрибут name изображения такое же, как одно из значений,
используемых функцией preLoad ().
- Это то же значение используется как аргумент iName (первый параметр)
функции rollOver ().
- Инициируемое изображение должно иметь префикс off.
Источник: www.woweb.com
|
