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