VPF::подгрузка рисунков onmouseover - Форум программистов

fleetboss

Дата 8.10.2009, 13:53 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Помогите дописать скрипт. В чем ошибка? Нужно чтобы скрипт зазружал 4 дополнительных рисунка, чтобы когда человек навел мышку на рисунок - появился другой сразу (чтобы она уже была загружена).

Код

<script language="JavaScript">
function preloader() 
{
var i = 0;
imageObj = new Image();
images = new Array();
images[0]="img/main/about2.gif"
images[1]="img/main/anketa2.gif"
images[2]="img/main/mail2.gif"
images[3]="img/main/contacts2.gif"
for(i=0; i<=3; i++)      {          imageObj.src=images[i];     }
}
</script>
</head>
<body onload="preloader();">

<table
<tr>

<td><a href="about.php" onMouseOver="document.about.src='img/main/about2.gif'" onMouseOut="document.about.src='img/main/about.gif'"><img src="img/main/about.gif" alt="about" name="about" border="0"></a></td>

</tr>

</table>

bars80080

Дата 8.10.2009, 15:01 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

ну, дык, вы одному и тому же объекту присваиваете рисунки. те что не успели щагрузиться - сбрасываются. присваивайте разным объектам (создавайте объект тоже в цикле)

fleetboss

Дата 8.10.2009, 15:15 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Код

<script language="JavaScript">
function preloader() 
{
var i = 0;
imageObj = new Image();
images = new Array();
images[0]="img/main/about2.gif"
images[1]="img/main/anketa2.gif"
images[2]="img/main/mail2.gif"
images[3]="img/main/contacts2.gif"
for(i=0; i<=3; i++){
  imageObj = new Image();
  imageObj.src=images[i];
}
}
</script>

Так типо?

Это сообщение отредактировал(а) fleetboss - 8.10.2009, 15:16

IDVsbruck

Дата 8.10.2009, 15:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Ага. И то, что ты загонишь таким методом картинки в кеш, не означает, что клиент не будет обращаться за картинкой на сервак: при подгрузке другой картинки он находит ее в кеше, но проверяет, соответствует ли она той, которая на сервере. Это раз. Второе, что раздражает значительно сильнее - мигание (следствие первого). От него таким способом избавиться нереально.
Настоятельно советую воспользоваться CSS Sprites - экономится все и заморочек с подгрузками нет.

Добавлено через 6 минут и 29 секунд
Нет.

Код


<script type="text/javascript">
function preloader() {
    var imageObjs = new Image();
    var images = ["img/main/about2.gif", "img/main/anketa2.gif", "img/main/mail2.gif", "img/main/contacts2.gif"];
    for (var i = 0; i < images.length; i++) {
        var imageObj = new Image();
        imageObj.src = images[i];
        imageObjs.push(imageObj);
    }
}
</script>

Очень важно использовать "var imageObjs" - массив заполнится картинками, которые загрузятся в кеш, а после выхода из функции объект удалится, так как на него не нужно ссылаться, а картинки так и останутся в кеше, чего ты, в принципе, и добиваешься.

fleetboss

Дата 8.10.2009, 20:20 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Скрипт вроде работает, но вот из-за выделеной // строки он не хочет работать, без нее правда вроде тоже работает как надо.

Код

<script type="text/javascript">
function preloader() {
    var imageObjs = new Image();
    var images = ["img/main/about2.gif", "img/main/anketa2.gif", "img/main/mail2.gif", "img/main/contacts2.gif"];
    for (var i = 0; i < images.length; i++) {
        var imageObj = new Image();
        imageObj.src = images[i];
        //imageObjs.push(imageObj); из-за этой строки скрипт не хочет работать
    }
}
</script>

А поповоду CSS Sprites. Я тут похимичил, вроде работает на ура в IE, НО в во всех других браузерах глючит. Когда наводишь мышью на <a href...>изображение</a> - рисунок меняется, НО оно не фиксируется (если мышью двигать - изображение туда-сюда меняется)... (

CSS:

Код


td.menu a {
    overflow: visible;
    visibility: visible;
    background-position: 0px;    
}
td.menu a:hover img{
    background-position: 0px;
    overflow: hidden;
    visibility: hidden;
}

HTML:

Код

<td width="200" height="70" class="menu" style="background-image:url(img/main/about2.gif)"><a href="about.php" class="menu" onFocus="this.blur()" alt="about" title="about"><img src="img/main/about.gif" border="0" width="200"></a></td>

Это сообщение отредактировал(а) fleetboss - 8.10.2009, 20:21

IDVsbruck

Дата 9.10.2009, 00:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Пардон ... ошибся при редактировании кода ... вместо var imageObjs = new Image(); надо было var imageObjs = []; (или new Array()).

А насчет спрайтов - во-первых, не понял - без ховера у тебя стили для ссылки, а с ховером - для имиджа. И почему не меняется бекграунд-позиция? И во-вторых, его удобнее использовать просто для ссылки с блочными стилями и заданными размерами.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »