Вход

Horus92 · 05-21-2011, 11:00 AM

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

Array · 05-21-2011, 11:36 AM

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

***PROGRAMMATOR*** · 05-21-2011, 02:11 PM

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

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

[Изображение: image.gif]

Немного css и 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 · 05-22-2011, 12:24 AM

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

Код:
<body  onload="preloadImages()">

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

function preloadImages() {

    $('img.preload').each(function(i, image) {

        $('<img />').attr('src', $(image).attr('src'));

    });

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

}

Хлорка · 05-22-2011, 12:31 AM

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

Немного css и 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*** · 05-22-2011, 02:09 AM

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

Azagthtot · 05-22-2011, 10:51 AM

Старый дедовский прием.

Код:
<body>

<script>

 a = new Image();

 a.src= "кешированная_картинка";

</script>

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

Вход
Имя пользователя:
Пароль:	Забыли пароль?
	Запомнить меня

Возможно похожие темы ...
Тема		Автор	Ответы	Просмотры	Последний пост
	Наемник в среде программирования Pascal Basic Perl PHP Html Kotlin js c++ c# python web razrab	Argyment	1	1,001	01-27-2023, 12:45 PM Последний пост: Argyment
	Копирование html;PHP - кода	M1xF1ght	6	2,291	11-30-2017, 09:16 AM Последний пост: Anikey
	Калькулятор ( js +html )	gorodetskiy	1	2,764	08-02-2012, 03:04 PM Последний пост: gorodetskiy
	Изучаем HTML, XHTML и CSS	Комиссар	16	8,288	07-13-2012, 07:22 PM Последний пост: Комиссар
	верстка макета в HTML код	Duha199612	7	3,750	01-25-2012, 08:36 PM Последний пост: [STIGMATED]
	html, css, div и бекграунды	**Ice_Man**	2	3,015	02-06-2011, 01:09 AM Последний пост: **Ice_Man**
	Как обучиться HTML,PHP?	pankration	13	6,354	06-26-2010, 01:56 PM Последний пост: Aquanox