Форум администраторов игровых серверов

Форум администраторов игровых серверов (https://forum.zone-game.info/TT.php)
-   Программирование / Programming (https://forum.zone-game.info/forumdisplay.php?f=98)
-   -   Предзагрузка картинки html (https://forum.zone-game.info/showthread.php?t=14199)

Horus92 21.05.2011 11:00

Предзагрузка картинки html
 
Подскажите пожалуйста как можно заранее подгрузить картинку в html чтобы подгурзку не происходила например в момент наведения на ссылку(тоесть при смене картинки через a:hover).

Array 21.05.2011 11:36

Re: Предзагрузка картинки html
 
Поместить эту же картинку в любое другое место, чтобы её не было заметно - она загрузится. Потом в hover появится сразу без загрузки.

PROGRAMMATOR 21.05.2011 14:11

Re: Предзагрузка картинки html
 
Довольно просто, отказаться от <img> и устанавливать фон самой ссылке.

Создаёте картинку сразу с двумя вариантами отображения, например вот такую:

http://image.zone-game.info/images/image.gif

Немного css и html магии:

Код HTML:

<style type="text/css">
a.hover {
        background-image: url(image.gif);
        display: block;
        height: 30px;
        width: 120px;
}

a.hover:hover {
        background-position: bottom center; /* смещение в нижнюю часть нашей картинки*/
}
</style>

<a class="hover" href="http://forum.zone-game.info/showthread.php?t=14199"></a>


Пример — http://www.seomax.info/html/hover/

Aquanox 22.05.2011 00:24

Re: Предзагрузка картинки html
 
когдато писал такой скрипт jQuery (точный код уже не помню).
Код:

<body  onload="preloadImages()">

сама рпроцедура

function preloadImages() {
    $('img.preload').each(function(i, image) {
        $('<img />').attr('src', $(image).attr('src'));
    });

    // тут цикл по тегам, просматривая background-image и такимже образом обрабатывать рисунки
}


Хлорка 22.05.2011 00:31

Re: Предзагрузка картинки html
 
Цитата:

Сообщение от PROGRAMMATOR (Сообщение 122836)
...
Создаёте картинку сразу с двумя вариантами отображения, например вот такую:

http://image.zone-game.info/images/image.gif

Немного css и html магии:

Код HTML:

<style type="text/css">
a.hover {
        background-image: url(image.gif);
        display: block;
        height: 30px;
        width: 120px;
}

a.hover:hover {
        background-position: bottom center; /* смещение в нижнюю часть нашей картинки*/
}
...


Нет так не получится - будет тоже самое, точнее на некоторых браузерах будет подгружать сразу, на некоторых потом, как, например Opera.

Тут нужно загрузить картинку сначала в буфер. MS FrontPage или как он сейчас называется, был такой встроенный макрос (создание кнопки), вот там добавлялся JavaScript с подгрузкой в память всех изображений сразу.

Установите FrontPage и сделаейте тестовую страничку.

PROGRAMMATOR 22.05.2011 02:09

Re: Предзагрузка картинки html
 
Это как, Опера подгружает произвольную часть картинки а далее все?
Проверено.

Azagthtot 22.05.2011 10:51

Re: Предзагрузка картинки html
 
Старый дедовский прием.
Код:

<body>
<script>
 a = new Image();
 a.src= "кешированная_картинка";
</script>

Данный скрипт ставите как можно раньше по коду. Можете его заинклюдить через <script src="">


Текущее время: 23:06. Часовой пояс GMT +3.

Powered by vBulletin® Version 3.8.6
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot