предварительная загрузка картинок сайта

Статус
В этой теме нельзя размещать новые ответы.

duncan

батяр з личакова
Регистрация
10 Апр 2007
Сообщения
1.599
Реакции
450
есть меню с большим количеством разных пунктов и как следствие -- фоновых картинок; для свойства "hover" использую позиционирование

схема:
HTML:
a.link1{background:url(images/1.jpg)}
a.link1:hover{background:url(images/1.jpg) 0 -85px no-repeat;}
a.link2{background:url(images/2.jpg)}
a.link2:hover{background:url(images/2.jpg) 0 -85px no-repeat;}
...

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

HTML:
<script language = "JavaScript" type="text/javascript">
window.onload = function () { 
a = new Image(); a.src = "images/1.jpg"; 
b = new Image();  b.src = "images/2.jpg"; 
</script>
 
дергаются в смысле появляется белый квадрат на время загрузки hover?
 
можно вставить в страницу невидимые картинки.
PHP:
<img src="images/1.jpg" alt="" style="display: none;">
<img src="images/2.jpg" alt="" style="display: none;">
 
Знаю такую проблему.
Обычно она возникает из-за того что у блока (кнопки) не указан размер (ширина, высота)
Код:
a.link1{background:url(images/1.jpg) width:,height:}

возможно, ещё display:block - понадобится
 
Знаю такую проблему.
Обычно она возникает из-за того что у блока (кнопки) не указан размер (ширина, высота)
Код:
a.link1{background:url(images/1.jpg) width:,height:}
возможно, ещё display:block - понадобится
не, проблема не в этом
полностью стиль:
HTML:
a.link1{ 
background:url(images/1.jpg) no-repeat; 
width:67px; 
height: 57px; 
padding: 0; 
margin: 0; 
display: block;
}
 
HTML:
<SCRIPT language="JavaScript">
<!--

  if (document.images)
   {
     p1on= new Image(100,25);
     p1on.src="../images/2.jpg";  

     p1off= new Image(100,25);
     p1off.src="../images/1.jpg";
   }

function pictup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>

или предзагрузка в хеадере

HTML:
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
  pict1= new Image(100,25); 
  pict1.src="../images/1.jpg"; 

  pict2= new Image(100,25); 
  pict2.src="../images/2.jpg"; 

  ...
  ...
}
//-->
</SCRIPT>
 
Это же спрайт...

Как я понял, картинок минимум две, условно image.jpg и image_hover.jpg, поэтому image_hover.jpg нужно принудительно подгрузить чтобы hover картинка попала в кэш, но правильнее будет использовать одну картинку на которой будет спрайт image и image_hover
 
инфы про это море, "техника" называется , так же есть ответвления, типа CSS Sprites optimistic loading, когда используются спрятанные блоки в самом начале документа, с бэкграундами в качестве всех используемых файлов спрайтов для быстрой предзагрузки, или так же спрятанные <img src="файл_спрайтов.png" ... />, для критически важных фоновых картинок (например кнопки доров, элементы большого перегруженного графикой сиджа и т.д.)
 
всем участникам спасибо, но помог именно последний совет -- склеил все картинки в одну и проблема решена.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху