Подгрузка изображений

Тема в разделе "Верстка", создана пользователем artefakt777, 5 янв 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Сделал так, что при наведении курсора на изображение, оно меняется на другое изображение.
    Но при наведении оно подгружается не сразу.
    Собственно как сделать, чтобы этой подгрузки не было и менялось оно мгновенно?
     
    avtorit1949 нравится это.
  2. 01K

    01K

    Регистр.:
    27 июн 2013
    Сообщения:
    271
    Симпатии:
    40
    Побольше информации!
    Чем сделано? JQuery? Код в студию
     
  3. NoName013

    NoName013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    80
    Симпатии:
    18
    Если делали с помощью псевдоклассов, то для решения подобной "проблемы" используются css спрайты. На хабре об этом неплохо написано http://habrahabr.ru/post/159027/ да и вообще много информации :)
     
  4. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Сделано стилями css:
    Код:
     a.t_l {
        background: url(images/top_left.png);
        background-repeat: no-repeat;
        display: block; /*  Рисунок как блочный элемент */
        width: 195px; /* Ширина рисунка */
        height: 74px; /*  Высота рисунка */
      }
      a.t_l:hover {
        background: url(images/top_left2.png);
        background-repeat: no-repeat;
        display: block; /*  Рисунок как блочный элемент */
        width: 195px; /* Ширина рисунка */
        height: 74px; /*  Высота рисунка */
      }
     
    avtorit1949 нравится это.
  5. NoName013

    NoName013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    80
    Симпатии:
    18
    Это и называется "псевдокласы". Читайте ту статью что я скинул выше.

    Вот кстати еще одна полезная ссылочка http://www.w3schools.com/css/css_image_sprites.asp
    Последний пример как раз ваш вариант.
     
  6. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Я так понимаю тут вариант с одной кратинкой, т.е. при наведении меняется только позиция отображения этой картинки.Такой вариант не подходит, т.к. придется редактировать достаточно много изображений и переписывать css.

    Можно ли подгрузить вторую картинку при загрузке страницы, но видно что бы ее не было. И как я понимаю, при наведении второй раз картинке не надо будет подгружаться и она будет сменяться мгновенно.
     
    Последнее редактирование: 5 янв 2014
    avtorit1949 нравится это.
  7. NoName013

    NoName013 Постоялец

    Регистр.:
    10 ноя 2013
    Сообщения:
    80
    Симпатии:
    18
    Вся фишка метода в том, что картинка у вас одна и она прогружается во время загрузки станицы. Пользователь видит только ее часть.

    Возьмем за пример статью с w3schools.
    Есть одна картинка, на которой нарисованы все кнопки [​IMG]
    И есть css код, который описывает псевдокласы.
    Код:
    #home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
    #prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
    #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
    В этом коде, как background выступает одна и та же картинка (которая больше чем видимая обрасть), НО позиция фона background-position разная. В результате пользователь видит разные части этой картинки.

    Фактически никакой загрузки изображения нету. Есть только одно изображение, которое мгновенно смещается при наведении на него курсора.
     
    artefakt777 нравится это.
  8. Sirkukk

    Sirkukk Создатель

    Регистр.:
    29 авг 2012
    Сообщения:
    18
    Симпатии:
    3
    Можно еще использовать прелоад для картинок (как сделать), но спрайты будут оптимальнее.
    Вообще за счет спрайтов можно ускорить загрузку страницы, постарайтесь как можно больше пиктограмм разместить через спрайты.
     
  9. icydrago

    icydrago Создатель

    Регистр.:
    21 янв 2013
    Сообщения:
    36
    Симпатии:
    2
    Проще все на фон потавить анимашку загрузки. При наведении картинка пропадает - будет виден фон.
     
  10. Gtnz

    Gtnz Писатель

    Регистр.:
    29 янв 2014
    Сообщения:
    2
    Симпатии:
    0
    1. можно предзагрузку сделать с помощью css:

    body:after {
    content: url('img.src') url('img.src');
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    }

    2. вставить как inline img обе картинки

    О остальных решениях ответили выше (sprite и js)