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

Тема в разделе "Веб-дизайн", создана пользователем duncan, 17 сен 2011.

Статус темы:
Закрыта.
Модераторы: zek24
  1. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    есть меню с большим количеством разных пунктов и как следствие -- фоновых картинок; для свойства "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> 
    
     
  2. Xansen

    Xansen

    Регистр.:
    30 мар 2006
    Сообщения:
    447
    Симпатии:
    119
    дергаются в смысле появляется белый квадрат на время загрузки hover?
     
  3. Monterpan

    Monterpan Постоялец

    Регистр.:
    3 мар 2008
    Сообщения:
    150
    Симпатии:
    27
    можно вставить в страницу невидимые картинки.
    PHP:
    <img src="images/1.jpg" alt="" style="display: none;">
    <
    img src="images/2.jpg" alt="" style="display: none;">
     
  4. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    Знаю такую проблему.
    Обычно она возникает из-за того что у блока (кнопки) не указан размер (ширина, высота)
    Код:
    a.link1{background:url(images/1.jpg) width:,height:}
    возможно, ещё display:block - понадобится
     
  5. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    не, проблема не в этом
    полностью стиль:
    HTML:
    a.link1{ 
    background:url(images/1.jpg) no-repeat; 
    width:67px; 
    height: 57px; 
    padding: 0; 
    margin: 0; 
    display: block;
    }
     
  6. porsche2

    porsche2

    Регистр.:
    18 ноя 2007
    Сообщения:
    667
    Симпатии:
    210
    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>
    
     
  7. bork75

    bork75 The Team

    Регистр.:
    21 июн 2008
    Сообщения:
    1.451
    Симпатии:
    677
    А этот пример тоже моргает?
    http://wellstyled.com/files/css-nopreload-rollovers/example.html
    У меня идеально.
    Может в твоём варианте, какой-нибудь лишний margin

    Это же спрайт...
     
  8. porsche2

    porsche2

    Регистр.:
    18 ноя 2007
    Сообщения:
    667
    Симпатии:
    210
    Как я понял, картинок минимум две, условно image.jpg и image_hover.jpg, поэтому image_hover.jpg нужно принудительно подгрузить чтобы hover картинка попала в кэш, но правильнее будет использовать одну картинку на которой будет спрайт image и image_hover
     
  9. luckydark

    luckydark Создатель

    Регистр.:
    27 ноя 2008
    Сообщения:
    26
    Симпатии:
    5
    инфы про это море, "техника" называется CSS Sprites, так же есть ответвления, типа CSS Sprites optimistic loading, когда используются спрятанные блоки в самом начале документа, с бэкграундами в качестве всех используемых файлов спрайтов для быстрой предзагрузки, или так же спрятанные <img src="файл_спрайтов.png" ... />, для критически важных фоновых картинок (например кнопки доров, элементы большого перегруженного графикой сиджа и т.д.)
     
    alice2k и пупер нравится это.
  10. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    всем участникам спасибо, но помог именно последний совет -- склеил все картинки в одну и проблема решена.
     
Статус темы:
Закрыта.