Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Наши скрипты > Предварительная загрузка изображений

Автор: Aliance 23.9.2005, 14:00

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

Автор: 02077461 27.9.2005, 10:18

есть такое свойство <img src="img1.gif" style="display: no">.
Создаешь невидимые картинки, а потом делаешь что хочешь...
Как по мне, то лучше для rollover картинок менять не src, а именно расположив две картинки одна над другой. Хотя задачи могут быть разные, для моей подходил именно такой вариант.

Автор: Aliance 27.9.2005, 12:52

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

Код


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

Автор: nworm 14.11.2005, 15:31

Вот я так примерно и сделал... Есть квадрат 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

Автор: Sardar 14.11.2005, 15:40

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

Автор: Kasper1985 11.6.2007, 21:32

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

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

Автор: Stephenlab 22.11.2010, 19:55

Скрипт отличный, но как быть если у меня на странице много элементов и они расбросаны по координатам. Т.е была координата КАРТИНКА_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