Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Предварительная загрузка изображений 
:(
    Опции темы
Aliance
Дата 23.9.2005, 14:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Задача:
Необходимо создать эффект предварительной загрузки изображения в кеш браузера, например, для rollover-картинок.

Решение:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Предварительная загрузка изображений © AlianceHTMLEditor [ http://editor.sut.net.ru/editor.html ]</TITLE>
<script type="text/javascript" language="JavaScript">
<!--//--><![CDATA[//><!--

if (document.images) {
    var img = new Object();
    img["first"] = new Image(80, 80);
    img["first"].src = "img/1.jpg";
    img["second"] = new Image(80, 80);
    img["second"].src  = "img/2.jpg";
    // и так далее...
}

//--><!]]>
</SCRIPT>
</HEAD>

<BODY>

<IMG src="img/1.jpg" height="80" width="80" onmouseover="this.src = img['second'].src" onmouseout="this.src = img['first'].src" />

</BODY>
</HTML>


Обсуждение:
Мы создаем объект img, и присваиваем его полям (в данном примере first, second) картинку, путем создания объекта картинки (new Image(height, width)), затем каждому полю (объекту-картинки) присваеваем свойство src.
PM MAIL WWW ICQ Skype   Вверх
02077461
Дата 27.9.2005, 10:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 183
Регистрация: 13.7.2005

Репутация: нет
Всего: 0



есть такое свойство <img src="img1.gif" style="display: no">.
Создаешь невидимые картинки, а потом делаешь что хочешь...
Как по мне, то лучше для rollover картинок менять не src, а именно расположив две картинки одна над другой. Хотя задачи могут быть разные, для моей подходил именно такой вариант.
PM   Вверх
Aliance
Дата 27.9.2005, 12:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 6
Всего: 137



Во-первых, не свойство.
Во-вторых, неверно...
Верно так:
Код

<img src="img1.gif" style="display: none">

PM MAIL WWW ICQ Skype   Вверх
nworm
Дата 14.11.2005, 15:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 502
Регистрация: 22.10.2005

Репутация: нет
Всего: 8



Вот я так примерно и сделал... Есть квадрат num_square*num_square. И код
Код

<script>
...

function preload(name, first, second, third, fourth) {  

  // предварительная загрузка изображений и размещение их в массиве  
  pics[objCount] = new Array(5);
  pics[objCount][0] = new Image();
  pics[objCount][0].src = first;
  pics[objCount][1] = new Image();
  pics[objCount][1].src = second;
  pics[objCount][2] = new Image();
  pics[objCount][2].src = third;
  pics[objCount][3] = new Image();
  pics[objCount][3].src = fourth;
  pics[objCount][4] = name;
  objCount++;
}

...

 // заранее загружаемые изображения 
 for (i = 0; i < num_square; i++) {
     for (j = 0; j < num_square; j++) {
         name="n"+(i*num_square+j);
         preload(name, "pics.bmp", "pict.bmp", "picq.bmp", "picq1.bmp");   
     } 
 }

... 

</script>

При возникновении события onLoad начинает выполняться скрипт, меняющий изображения в квадрате. Всё бы было хорошо, если бы на форме не было гиперссылок на другие формы. При нажатие на такие ссылки на главной форме начинается какой-то кошмар. Почему, не знаю smile

Это сообщение отредактировал(а) Aliance - 17.11.2005, 19:26
PM MAIL WWW   Вверх
Sardar
Дата 14.11.2005, 15:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 16
Всего: 317



nworm создавай отдельную тему и выкладывай код(вёрстка формы), мысли читать здесь не умеют.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Kasper1985
Дата 11.6.2007, 21:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 4
Регистрация: 11.6.2007

Репутация: нет
Всего: нет



Подскажите пожалуйста как сделать чтобы свободно позиционируемы элементы на странице не смещались в сторону при изменении разрешения экрана, ни при нажатии f11 и т.д. Заранее спасибо.
И почему flash  ролик в IE повторяется не 1 раз, а в опере и в мозиле только 1 раз, ка кэтого избежать?

Добавлено через 1 минуту и 10 секунд
nworm, Подскажите пожалуйста как сделать чтобы свободно позиционируемы элементы на странице не смещались в сторону при изменении разрешения экрана, ни при нажатии f11 и т.д. Заранее спасибо.
И почему flash  ролик в IE повторяется не 1 раз, а в опере и в мозиле только 1 раз, ка кэтого избежать?
PM MAIL   Вверх
Stephenlab
Дата 22.11.2010, 19:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 9
Регистрация: 20.11.2010

Репутация: нет
Всего: нет



Скрипт отличный, но  как быть если у меня на странице много элементов и они расбросаны по координатам. Т.е была координата КАРТИНКА_1 и при наведении на нее появлялась КАРТИНКА_2 со своими координатами. Вот пример:

<a href="http://.......">
<div><img src="\КАРТИНКА_1.jpg" style="position:absolute; top:540px; left:357px;"/><img src="\КАРТИНКА_2.jpg" style="position:absolute; top:479px; left:256px;"/></div></a>

К HTML подгружался CSS код который при наведении на КАРТИНКУ_1 выводил КАРТИНКУ_2
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.1284 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.