Вступление
Если у вас есть серия изображений для предзагрузки, то вы можете воспользоваться функцией 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.
Оригинал статьи по адресу:
http://members.evolt.org/jeff/code/preload_n_rollover/
Перевод: Иван Шувалов |
| 
