Октябрь 13th, 2014 
Topaz Если у вас есть серия изображений для предзагрузки, то вы можете воспользоваться функцией 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.
Источник: woweb.ru
Опубликовано в рубрике 
Метки: