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

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

Форум программистов > JavaScript: Общие вопросы > предварительная загрузка картинок

Автор: Gold Dragon 17.3.2005, 16:41

Что-то совсем разучился в JavaScript писать

Вот адрес сайта http://grant-nn.russian.ru/

Там есть бегующие треугольнички. Меня интересует, почему они постоянно при наведении подгружаются заново. А в FireFox вообще не грузятся..

Автор: Aliance 17.3.2005, 17:18

Может стоит no-cache?
Вообще, предварительную загрузку картинки можно сделать только в IE:

Код


if (document.images) {
 // ... создаем тут картинки.
}

Пример:

Код


if (document.images) {
 var img = new Object();
 img["picture"] = new Image(100, 100);
 img["picture"].src = "qwe.gif"
}

...

<IMG src="" id="p" name="p" onmouseover="this.src = 'qwe.gif'">

Автор: Sardar 17.3.2005, 19:35

Простая презагрузка изображений:

Код

menuImage.images={};
menuImage.images.get(path) {return this["~"+path];}

function menuImage(path) {
  if(menuImage.images["~"+path]) return;
  var i=new Image(); i.src=path;
  menuImage.images["~"+path]=i;
  return i;
}

//пример
menuImage("./images/img1.jpg");
menuImage("./images/img2.jpg");
....

Red Dragon лиса у меня так не глючит, просто ничего не работает. Ошибка

Цитата

Error: document.getElementById(a) has no properties
Source File: http://grant-nn.russian.ru/
Line: 17

Автор: Gold Dragon 18.3.2005, 09:31

C Лисой разобрался smile

Как обычно, писал для IE и не взял в расчёт "name" и "id"

IE пофигу, а вот другим браузерам не всё равно smile

Но так и не понял почему не работает предварительная загрузка

вот код

Код


<head>
<script>

var image_r = new Image()
image_r.src = "image/but1.gif"

var image_g = new Image()
image_g.src = "image/but2.gif"

function but_over(a) {
 document.getElementById(a).setAttribute("src",image_g.src)
}

function but_out(a){
 document.getElementById(a).setAttribute("src",image_r.src)
}
</script>

</head>

<body>

- создаю объект
- назначаю значение
- и потом использую

и всё до <body>

Автор: Sardar 18.3.2005, 13:01

Цитата(Red @ 18.3.2005, 08:31)

document.getElementById(a)

В этой строке у тебя null почему то. Убедись что это не так, поставь alert.

Автор: Gold Dragon 18.3.2005, 13:37

да нет там null, выдаёт имя

И, кстати, я поменял name на id и всё вроде стало предварительно загружаться

Автор: Urod 10.7.2005, 14:41

Прошу прощения за реанимацию топа, но у меня сейчас такая же проблема. Мне необходимо написать скрипт предварительной загрузки картинок, т.к. при просмотре моего сайта они (картинки) долго подгружаются (последовательно).
Я совершенно не владею JS, попыталась разобраться в примере Дракона, но не поняла but2.gif - это какие-то конкретные картинки, которые и необходимо предварительно загрузить?
У меня много картинок, значит, нужно каждую из них по анологии (со скриптом Дракона) описывать? Как определить id картинки? Я так понимаю, нужно не имя картинки, а ее id прописывать?
Помогите разобраться, пож-та.

Автор: Aliance 10.7.2005, 23:57

Все верно, ибо картинки документ еще не загружен. Используйте это только после window.onload (поэтому, Red Dragon и null выдавало.)

Автор: Sardar 11.7.2005, 02:05

Ещё стоит гнлянуть сюда: http://www.stunicholls.myby.co.uk/menus/index.html
Вспомнить что у ссылкой есть псевдо-класс hover и стил background. А ещё лучше не делить бекграунды на несколько картинок, а сделать одну, затем через background-position сдвинуть куда угодно. Скриптов не нужно совсем.

Автор: InfMag 25.1.2008, 10:49

хм... только в IE говорите?? Можно поступить по хитром, например создавать таблицу 100% на 100% в которой будет контент сайта и на ней будет bgcolor как на фоне, чтобы прозрачной не была, а перед таблицей идем так:

Код


<div style="z-index:-9999;">
<img src="image.jpg" width="100" height="100" border="0" id='picture1">
</div>

А у таблицы z-index:1;
Вот оригинальное решение, картинки грузятся под слоем сайта

Добавлено через 32 секунды
А!!! Еще к виду position:absolut;!!!

Добавлено через 1 минуту и 5 секунд

Код


position:absolute;

тоесть

Автор: Gold Dragon 7.8.2008, 15:35

ну нифига себе какие темы давние поднимают..... smile

Автор: InfMag 8.8.2008, 11:57

я делал огородными путями, вроде все работало smile

вобщем создаешь стиль

Код


.preloadImage
{
     position: absolute;
     z-index: -9999;
     top: 5;
     left: 5;
}

потом на страничке ужо можно баловаться smile

Код


<html>
<head>
<title>page</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%" bgcolor="#ffffff">
<tr>
<td>

<img src="images/forpreload1.jpg" class="preloadImage">
<img src="images/forpreload2.jpg" class="preloadImage">

Тут наш контент

</td>
</tr>
</table>
</body>
</html>