Действительно умный Прелоад (Preload) картинок

Тема в разделе "Веб-дизайн", создана пользователем alexks, 2 ноя 2010.

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

    alexks Создатель

    Регистр.:
    19 апр 2010
    Сообщения:
    27
    Симпатии:
    0
    Господа, переискал весь инет, но так и не нашел действительно умного прелоада.
    Хотелось бы следующее. Есть слайдшоу с 10 картинками тяжелыми(у них по умолчанию display:none; ). На onload вызывается функция, назовем ее preload, которой в параметрах передаем список картинок. Далее она грузит картинки и именно дожидается пока картинки упадут в кэш, после чего выдает событие, что все загружено и скрипт слайдшоу начинает прокручивать картинки.
    Суть в том, чтобы скрипт определял, что картинка действительно в кэше. А не начала загружаться и тд.

    Пробовал разные скрипты, но они почему-то все пишут что все загрузилось, но на самом деле картинки еще подгружаются. Т.е именно не отслеживается момент, что все - картинка загружена на 100%.

    Есть у кого-нибудь, что-то такое?
     
  2. askarbin

    askarbin

    Регистр.:
    31 мар 2009
    Сообщения:
    292
    Симпатии:
    36
    К сожалению, сталкивался с похожей проблемой и мне так и не удалось найти приемлемого решения. Вам скорее всего придется писать самому/заказывать такой функционал. Я перерыл горы готовых решений на jQuery, mootools и т.д., но ничего толкового не нашел везде наблюдались проблемы с подгрузкой картинок или вообще кривым отображением. Пришлось отказаться от этой идеи и реализовывать другие эффекты.
     
  3. alfaexpert

    alfaexpert

    Регистр.:
    23 июл 2008
    Сообщения:
    183
    Симпатии:
    27
    Я такую проблему делал без jquery:
    В стили добавляем:
    HTML:
    
    .invisible
    {
      position: absolute;
      left: -4000px;
    }
    
    После тэга <body> ставим
    HTML:
    
    <body>
    <div class="invisible">
      <img src="http...." >	  <img src="http...." >	  <img src="http...." >	
    </div>
    
    принцип действия:
    загружается страница: Применяется стиль и все картинки сдвигаются за экран браузера.
    После того как браузер загрузится пойдет загрузка оставшейся части страницы, в которой будет Слайдер картинок. А картинки уже были подгружены и закэшированы браузером.
     
    alexks нравится это.
  4. alexks

    alexks Создатель

    Регистр.:
    19 апр 2010
    Сообщения:
    27
    Симпатии:
    0
    Такой вариант не решает проблему, суть проблемы - определить что картинки все загружены и запустить слайдшоу.
    А так скрипт начнет работать, а картинки еще грузятся...

    Во флэше это неплохо организовано, когда отображается процент загрузки контента, после чего все начинает работать.
     
  5. alfaexpert

    alfaexpert

    Регистр.:
    23 июл 2008
    Сообщения:
    183
    Симпатии:
    27
    Не нужно ничего определять. :)

    Если вставить картинки после тэга body и сдивнуть их за экран то сначала загрузятся ВСЕ картинки, а потом пойдет код слайдщоу - браузер не будет одну и ту же картинку грузить два раза - он просто возьмет кэш картинок и страница загрузится корректно.
     
  6. Nei

    Nei Nosce te ipsum

    Регистр.:
    5 сен 2009
    Сообщения:
    635
    Симпатии:
    502
    Кстати, действительно вариант решения.
    Только не в div запихнуть картинки (т.к. дивы грузиться будут параллельно), а в таблицу.
    По идее пока ячейки таблицы должны грузиться последовательно, т.е. пока не загружены верхнии - нижние не грузятся.
     
  7. alexks

    alexks Создатель

    Регистр.:
    19 апр 2010
    Сообщения:
    27
    Симпатии:
    0
    В принципе вариант, но не очень красивый..
    Я так понимаю запуск слайдшоу тогда вешать уже на window.onload, а не на document ready?
     
  8. Beat

    Beat Писатель

    Регистр.:
    31 окт 2006
    Сообщения:
    5
    Симпатии:
    0
  9. alfaexpert

    alfaexpert

    Регистр.:
    23 июл 2008
    Сообщения:
    183
    Симпатии:
    27

    http://ra21.com/

    Вот сайт, на котором подгрузка фото сделана описанным мною способом.
     
Статус темы:
Закрыта.