SiteMaker - Академия сайтостроительства | Разработка сайта
| Вёрстка сайта
| Веб программирование
| Интернет технологии
| Продвижение ресурса
| Инструментарий
карта сервера :: форум :: профайл :: авторам :: о сайте
Гид: SiteMaker.Ru » Веб программирование » JavaScript и VBScript » Предварительная загрузка рисунков (preload) и перекат (rollover)

Предварительная загрузка рисунков (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>

Есть три важных детали, которые следует отметить при рассмотрении вышеуказанного кода.

  1. Атрибут name изображения такое же, как одно из значений, используемых функцией preLoad ().
  2. Это то же значение используется как аргумент iName (первый параметр) функции rollOver ().
  3. Инициируемое изображение должно иметь префикс off.

Оригинал статьи по адресу:
http://members.evolt.org/jeff/code/preload_n_rollover/

Перевод: Иван Шувалов


Автор: Jeff HowdenДата публикации: 11.06.2002
Рейтинг статьи: [4.81] рейтинг статьи: 4.81рейтинг статьи: 4.81рейтинг статьи: 4.81рейтинг статьи: 4.81рейтинг статьи: 4.81 [голосов: 21]Кол-во просмотров: 15318
Оценить статью: Установите cookies!

Комментарии читателей:


Сообщение №29 Кириллов Саша 09.08.2002 10:29:01
Спасибо большое, очень радует, что всё разжевано и положено в рот: можно не только решить конкретную задачу, но и подразобраться в JS
Сообщение №144 Сергей Бондаренко 10.02.2003 23:48:58
Обьяснил классно. Это правда.
Но в скриптах баг. Это плохо.
10-я строчка в прелоаде. там в цикле надо j меньше sufLen.
Сообщение №246 Алмат 10.06.2003 8:48:56
Класно если бы это ещё VBS :-))
Сообщение №308 Arsen 01.12.2003 3:32:42
Нифига не понял, вставил этот код в страницу, поменял названия файлов и выдается ошибка javascrip'а :((((( Напишите здесь действующий код например для картинки menu01s.gif
Сообщение №310 Arsen 01.12.2003 3:56:04
Похоже что ты тока что, Тема, форум хакнул :))))) Зря ты код в сообщение вставил, он не покажется, т.к. браузер забрал себе :))) Видишь ошибочку в трее??? ;)))

» Читать все комментарии...

Ваши комментарии:

Ваше имя:*
Ваш E-mail:
Ваш URL:
HTML запрещен
BB Код разрешен


Ваше сообщение:*
* - обязательные поля для заполнения

Внимание!
Перед появлением сообщения на сайте, оно пройдет премодерацию.

Поиск по сайту:

Последние статьи:
Создание файлов при помощи JavaScript и VBScript Создание файлов при помощи JavaScript и VBScript
» архив всех статей
Схожая тематика:
:: PHP
:: Perl/CGI
:: ASP

Академия веб мастеринга и веб дизайна. Разработка сайта, вёрстка сайта, веб программирование, продвижение ресурса, инструментарий и другие темы, посвященные разработке ресурсов в сети Интернет. Форум для веб мастера.


карта сервера :: форум :: профайл :: авторам :: о сайтеНаверх
Rambler's Top100Rambler's Top100 Valid HTML 4.01! © 2000-2016 Все права защищены
страница создана за 0.012 секунд
На главную страницуDeveloped by SiteMaker