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

Discussion in 'CSS, HTML, Web 2.0, верстка по web-стандартам' started by segun77, Jul 17, 2008.

Thread Status:
Not open for further replies.
  1. segun77
    Offline

    segun77 Недавно здесь

    Joined:
    Jun 25, 2008
    Messages:
    28
    Likes Received:
    0
    Есть такая проблема. На сайте картинка кнопки подгружается в момент, когда мышка над надписью кнопки находится. Некрасиво совсем получается, т.к. кнопка состоит из двух половинок. Сначала появляется одна половинка, потом вторая.
    Существует ли какой-нибудь небольшой скрипт, который подгружал бы конкретно указанные картинки, чтобы к нужному моменту они отображались моментально?
     
    segun77, Jul 17, 2008
    #1

  2. Ads Master

     
  3. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Joined:
    Jul 25, 2007
    Messages:
    629
    Likes Received:
    34
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице.

    Скрипт, вряд ли, хотя все может быть...

    Вообще, чтобы в "нужный момент", а именно когда мышка находится над ссылкой, мгновенно осуществлялась смена фонового изображения, применяют стандартные средства CSS. Оба фоновых изображения объединяют в одно, а затем в зависимости от того, где нужно первое из них, устанавливают заливку, начиная от верхней границы полученного изображения, а где второе - соответственно, от нижней, либо от его центра.
     
    AmmiAk, Jul 17, 2008
    #2
  4. Offline

    Be'live Недавно здесь

    Joined:
    Apr 13, 2006
    Messages:
    135
    Likes Received:
    7
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице.

    можно с помощью javascript
     
    Be'live, Jul 17, 2008
    #3
  5. segun77
    Offline

    segun77 Недавно здесь

    Joined:
    Jun 25, 2008
    Messages:
    28
    Likes Received:
    0
    Ответ: Предварительная загрузка картинок на странице.

    Ну это то я знаю. Кстати, в стандартном наборе джумлы в шаблоне rhuk_solarfly_ii как раз и применен такой принцип к вертикальному меню.
    У меня история иная. Меню горизонтальное, так что кнопки растягиваются, в зависимости от длины текста в кнопке. В начале нет изображения кнопки совсем, т.е. только надпись, когда подвожу мышку, появляется кнопка, которая появляется только под тем пунктом меню, над которым в данный момент указатель мыши.
    Я знаю, что можно средствами java сделать. У кого-нибудь есть скрипт подобный? В нете не нашел...
     
    segun77, Jul 17, 2008
    #4
  6. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Joined:
    Jul 25, 2007
    Messages:
    629
    Likes Received:
    34
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице.

    Ничего, повторение - мать учения! Не тебе, так окажется полезным кому-то еще. ;)

    Тогда предложу еще один альтернативный метод, хотя он, скорее всего, также тебе известен. Заключается сей метод в том, чтобы предварительно прогружать кэш пользовательских браузеров необходимыми в обиходе изображениями. Для этого в начале шаблона сайта, сразу после открывающегося тега <body> или ниже создается контейнер, в который помещаются необходимые для предварительной прогрузки изображения с шириной и высотой, не превышающими единичных значения - изображений не видно, но это не означает, что их нет в кэше пользовательских браузеров. :pleasant:
     
    AmmiAk, Jul 17, 2008
    #5
  7. Offline

    Be'live Недавно здесь

    Joined:
    Apr 13, 2006
    Messages:
    135
    Likes Received:
    7
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице.

    вот на сайте есть предзагрузка через javascript - посмотрел я.. думаю там эти функции в связке работают... надо покопаться хорошенько..
    http://svra.ru/avt009.html

    вот AmmiAk предложил интересный способ)) мне понравился
     
    Be'live, Jul 17, 2008
    #6
  8. Offline

    _voland_ Местный => Cпециалист <=

    Joined:
    Apr 12, 2008
    Messages:
    2,171
    Likes Received:
    102
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице.

    достаточно погуглить.. есть решения без ява скрипт...
    как самое очеидное (но не самое простое) сделать div с той же картинкой на бэкграунде и сделать его невидимым
     
    _voland_, Jul 17, 2008
    #7
  9. segun77
    Offline

    segun77 Недавно здесь

    Joined:
    Jun 25, 2008
    Messages:
    28
    Likes Received:
    0
    Ответ: Предварительная загрузка картинок на странице.

    Вот это мысль! Я и не подумал об этом. Просто прописать линки на изображения, которые надо подгрузить и поставить высоту и ширину в 1 пиксель?
    Кажется нашел "скриптик"...
    Код (CODE):
    1. <script language=JavaScript>
    2. pic = new Image();
    3. pic.src="test.jpg";
    4. </script>

    Еще не проверял, но может сработает.
    Воткнуть надо в <head>
     
    Last edited by a moderator: Jul 30, 2008
    segun77, Jul 17, 2008
    #8
  10. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Joined:
    Jul 25, 2007
    Messages:
    629
    Likes Received:
    34
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице.

    Именно так, выглядеть сие великолепие может следующим образом:
    Код (CODE):
    1. <div id="preLoadImg">
    2.  
    3.     <img src="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>/
    4.         images/image1.jpg" width="1" height="1" alt="" />
    5.     <img src="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $cur_template; ?>/
    6.         images/image2.jpg" width="1" height="1" alt="" />
    7.     ...
    8.  
    9. </div>

    Что касается использования скриптов в шаблоне сайта - чем их меньше, тем лучше! :X
     
    AmmiAk, Jul 17, 2008
    #9
    segun77 likes this.
  11. segun77
    Offline

    segun77 Недавно здесь

    Joined:
    Jun 25, 2008
    Messages:
    28
    Likes Received:
    0
    Ответ: Предварительная загрузка картинок на странице.

    Работает!
    Хостер видимо такой, пока у них обновилось все...
    Но есть один баг в эксплорере, вся страница теперь имеет отступ сверху примерно в 10 пикселей.
    В мозилле он решился путем указания нулевой высоты и отступов с полями для контейнера.

    Добавлено через 47 минут
    Все исправил. Пришлось для оперы отдельно css создать из-за однопиксельной полоски в самом верху страницы.
    Для эксплорера margin-top:-14px;
    для оперы margin-top:-1px;
    В мозилле по нулям
    Огромное спасибо AmmiAKу! за предложенное решение. с|:)
     
    Last edited: Jul 17, 2008
    segun77, Jul 17, 2008
    #10
  12. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Joined:
    Jul 25, 2007
    Messages:
    629
    Likes Received:
    34
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице.

    segun77, не за что! :ok:

    Единственное, что в данный момент не позволяет мне с чистой совестью закрыть эту тему, - это довольно неоднозначная ситуация с "решениями" для различных браузеров. По-моему, ты все же перемудрил. ?:\
     
    AmmiAk, Jul 17, 2008
    #11
  13. segun77
    Offline

    segun77 Недавно здесь

    Joined:
    Jun 25, 2008
    Messages:
    28
    Likes Received:
    0
    Ответ: Предварительная загрузка картинок на странице.

    иначе не одинаково отображается.
     
    segun77, Jul 17, 2008
    #12
  14. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Joined:
    Jul 25, 2007
    Messages:
    629
    Likes Received:
    34
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице

    Дабы не быть голословным, приложу скриншот главной страницы сайта, как она есть в IE7 - ни о какой кроссбраузерности здесь, как понимаешь, говорить не приходится... :no:

    Посмотрю на досуге, что там у тебя с "внутренностями" сайта (ссылка у меня есть) - может, назначу чего для достижения нужного терапевтического эффекта в Firefox, IE6, IE7, Opera и Safari. ?:\

    Пока же небольшая проповедь от меня - не люблю я маленьких и сухих постов своего авторства. :ru:
    Проповедь AmmiAk'a во имя кроссбраузерной и валидной верстки
     

    Attached Files:

    AmmiAk, Jul 19, 2008
    #13
  15. segun77
    Offline

    segun77 Недавно здесь

    Joined:
    Jun 25, 2008
    Messages:
    28
    Likes Received:
    0
    Ответ: Предварительная загрузка картинок на странице

    опа...
    а у меня нет 7-го эксплорера и проверить я не мог как там отображается. Оказывается поиск съехал...
    Спасибо тебе за критику. Мне не хватает опыта, я только начинаю во всем разбираться. Голова пухнет порой, когда пытаешься понять отдельные моменты.
     
    segun77, Jul 20, 2008
    #14
  16. AmmiAk
    Offline

    AmmiAk Укротитель браузеров

    Joined:
    Jul 25, 2007
    Messages:
    629
    Likes Received:
    34
    Gender:
    Male
    Ответ: Предварительная загрузка картинок на странице

    Это все, чем можно было ограничиться в содержимом стилевого файла шаблона:
    Код (CODE):
    1. #preLoadImg {
    2.   position: absolute;
    3.   width: 0;
    4.   height: 0;
    5.   margin: -150px 0 0;
    6. }

    Тему благополучно закрыл. :bye:
     
    AmmiAk, Jul 30, 2008
    #15
< Ajax красивости эфекты | Вид модуля меню магазина >
Thread Status:
Not open for further replies.

Share This Page

Loading...