Как я могу реализовать отложенную загрузку на странице с более чем 500 изображений? - PullRequest
Новая
       7

Как я могу реализовать отложенную загрузку на странице с более чем 500 изображений?

2 голосов
/ 25 марта 2010

У меня в основном есть страница результатов модуля механизма бронирования, на которой должно показывать 40 единиц, а на каждую единицу приходится 1 большое изображение первого эскиза и число X сопровождающих миниатюр изображений.

Я использовал плагин для отложенной загрузки jquery, но он недостаточно тщательный (я запускаю его в DOM Ready), плюс он не работает в IE (50% клиентов используют IE, так что это большая проблема).

То, что я действительно должен сделать, это не выплевывать изображение, а поддельный элемент, такой как span, и, возможно, модифицировать мой код таким образом, чтобы, если пользователь просматривает span, отображать его в элемент изображения. 

<span src="/images/foo.gif">

Механизм бронирования опирается на JS, поэтому я думаю, что мне придется просто полагаться на изменение всех миниатюр и иметь обработчики событий при прокрутке окна и т. Д., Чтобы страница была «полезной» и загружалась в среднем времени ( 2-3 секунды вместо 5-30 с на высокоскоростном DSL / кабеле).

Буду признателен за любые примеры или идеи.

Ссылки по теме / находки, которые могут быть полезны для решения этой проблемы:

# 1 : http://github.com/silentmatt/jquery_lazyload

Вилка jquery lazy load, которая, кажется, решает загрузку IE и добавляет поддержку контейнеров.

# 2 : youtube.com устанавливает для некоторых видео src прозрачный gif 1x1 и ленивую загрузку примерно после первых 10 результатов или около того.

Обновление

# 1 : Мы решили создать скрипт для генерации миниатюр и их рекурсивной генерации. Я их реализовал. Вместо каждого из 570 миниатюрных изображений размером 60-120 КБ теперь они составляют 2 КБ за штуку. Загружается немного быстрее, но все еще медленно из-за 570 одновременных запросов, хотя плагин для отложенного загрузчика установлен, я не уверен, что он будет применен достаточно быстро (даже на DOM, готовом до полной загрузки изображений). Добиваясь некоторого прогресса, хотя.

Я думаю о том, чтобы генерировать 1x1 пиксельные гифки после первых 10 блоков и просто лениво загружать их. Тем не менее, нужно еще разработать технику.

Ответы [ 3 ]

6 голосов
/ 25 марта 2010

Веб-браузеры довольно умны в эффективном рендеринге страниц, поэтому попробуйте это:

  1. Убедитесь, что вы отправляете размер изображения в HTML, чтобы браузер мог отобразить всю страницу, даже если изображения еще не загружены.

  2. Заполните URL самых важных изображений сразу (на сервере), чтобы браузер загружал изображения как можно быстрее. Для всех других изображений используйте заполнитель с надписью «Изображение загружается ...» или что-то в этом роде.

  3. При загрузке страницы замените заполнители реальными изображениями на заднем плане (загрузите 2-3 изображения, затем снова запустите себя с таймером ожидания, скажем, 50 мс).

Вы можете дополнительно оптимизировать шаг # 3, запрашивая размер окна браузера, а затем запрашивать изображения для их положения и загружать их, только если они видимы.

3 голосов
/ 25 марта 2010

Что-то вроде этого возможно: 

<img lateSrc="/some/image.gif" />

<script>
$(document).ready(function() { 
    $('img[lateSrc]').each(function() { 
        var t = $(this);
        t.attr('src', t.attr('lateSrc')).removeAttr('lateSrc');
    });
});
</script>
1 голос
/ 25 марта 2010

Насколько велики изображения? Альтернативный подход может заключаться в том, чтобы загрузить их как одно большое мозаичное изображение, а затем нарезать его css sprites или чем-то подобным.

...