Предзагрузка картинки html - Форум администраторов игровых серверов
Форум администраторов игровых серверов StormWall - Защита от DDos атак
Регистрация Мнения Справка Пользователи Календарь Все разделы прочитаны
Вернуться   Форум администраторов игровых серверов > Полезное / Common > Программирование / Programming

Программирование / Programming
Ищете помощи в написании программы, есть сложность в выполнении задания (в институте и т.д.), пожалуйста, спросите у нас в данном форуме и мы обязательно вам поможем. При поддержке: Рейтинг серверов самых популярных online-игр

Ответ
Опции темы
Непрочитано 21.05.2011, 11:00   #1
Аватар для Horus92
Пользователь

Автор темы (Топик Стартер) Предзагрузка картинки html

Подскажите пожалуйста как можно заранее подгрузить картинку в html чтобы подгурзку не происходила например в момент наведения на ссылку(тоесть при смене картинки через a:hover).
Horus92 вне форума Ответить с цитированием
Непрочитано 21.05.2011, 11:36   #2
Аватар для Array
Супергерой

По умолчанию Re: Предзагрузка картинки html

Поместить эту же картинку в любое другое место, чтобы её не было заметно - она загрузится. Потом в hover появится сразу без загрузки.
Array вне форума Ответить с цитированием
Непрочитано 21.05.2011, 14:11   #3
Аватар для PROGRAMMATOR
Администратор

По умолчанию Re: Предзагрузка картинки html

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

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



Немного 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/
__________________
composer require laravel/framework
yarn add vue
PROGRAMMATOR вне форума Отправить сообщение для PROGRAMMATOR с помощью ICQ Отправить сообщение для PROGRAMMATOR с помощью Skype™ Ответить с цитированием
Непрочитано 22.05.2011, 00:24   #4
Пользователь

По умолчанию Re: Предзагрузка картинки html

когдато писал такой скрипт jQuery (точный код уже не помню).
Код:
<body  onload="preloadImages()">

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

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

    // тут цикл по тегам, просматривая background-image и такимже образом обрабатывать рисунки
}
__________________
for(;Forum.getPostCount() < Integer.MAX_VALUE; Forum.writeNewPost()); | TERA Video | GamezTERA Emu
Aquanox вне форума Ответить с цитированием
Непрочитано 22.05.2011, 00:31   #5
Аватар для Хлорка
Пользователь

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

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



Немного 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 и сделаейте тестовую страничку.
Хлорка вне форума Отправить сообщение для Хлорка с помощью ICQ Ответить с цитированием
Непрочитано 22.05.2011, 02:09   #6
Аватар для PROGRAMMATOR
Администратор

По умолчанию Re: Предзагрузка картинки html

Это как, Опера подгружает произвольную часть картинки а далее все?
Проверено.
__________________
composer require laravel/framework
yarn add vue
PROGRAMMATOR вне форума Отправить сообщение для PROGRAMMATOR с помощью ICQ Отправить сообщение для PROGRAMMATOR с помощью Skype™ Ответить с цитированием
Непрочитано 22.05.2011, 10:51   #7
Аватар для Azagthtot
Эксперт

По умолчанию Re: Предзагрузка картинки html

Старый дедовский прием.
Код:
<body>
<script>
 a = new Image();
 a.src= "кешированная_картинка";
</script>
Данный скрипт ставите как можно раньше по коду. Можете его заинклюдить через <script src="">
Azagthtot вне форума Отправить сообщение для Azagthtot с помощью ICQ Отправить сообщение для Azagthtot с помощью Skype™ Ответить с цитированием
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверочные картинки(Оч надо зайдите плиз) UFODriverr PHP 7 10.04.2010 16:53
HTML Romanz Документация 4 19.03.2010 02:35
HTML: data/html/merchant/xxxx.htm esdsnake Работа со скриптами 2 27.01.2010 23:59
обвзяка от ребилион, неверный код картинки zasov Движки сайтов (CMS) 7 29.05.2009 12:39
Картинки скиллов MaxPayne Lineage II 3 19.01.2009 10:49


© 2007–2020 «Форум администраторов игровых серверов»
Защита сайта от DDoS атак — StormWall
Работает на Булке неизвестной версии с переводом от zCarot
Текущее время: 02:23. Часовой пояс GMT +3.

Вверх