jQuery Бесконечная прокрутка / Ленивая загрузка

Question

В настоящее время я занимаюсь редизайном своего веб-сайта и изучаю возможности использования JavaScript и jQuery. Вот что у меня пока так: http://www.tedwinder.co.uk/gallery2/.

Мое видение состоит в том, чтобы разместить все фотографии на одной странице, которую пользователь может прокручивать, как сейчас. Тем не менее, я понимаю ограничения и эффекты наличия более 50 изображений большого размера на одной странице и рассмотрел возможность использования бесконечной прокрутки и отложенной загрузки, которая, как я понимаю, будет загружать изображения только тогда, когда пользователь добирается до них или когда они нажимают на Ссылка "Ещё"?

Итак, мой вопрос: уменьшит ли это загрузку страницы, как именно я буду реализовывать бесконечную прокрутку / отложенную загрузку и будет ли это работать эффективно, или вы могли бы придумать какой-нибудь более эффективный способ сделать это?

Спасибо, Тед

Answer 1

Это довольно хороший плагин для jQuery, который обрабатывает ленивую загрузку изображений.

http://www.appelsiini.net/projects/lazyload

Изображения ниже сгиба не будут загружаться до тех пор, пока они не будут прокручены.

Это снизит пропускную способность вашего сайта, но если у вас мало трафика, это не будет иметь большого значения.

Пример использования этой техники: http://mashable.com/

Answer 2

попробуйте этот плагин загрузки jQuery Lazy Scroll http://code.google.com/p/jquerylazyscrollloading/

Answer 3

Вы можете попробовать этот плагин jQuery, который я написал, который использует комментарии html для отложенной загрузки любых произвольных битов html, включая изображения:

JQuery Lazy Loader Blog Post

Страница плагина jQuery Lazy Loader

Вот пример:

<code><pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –>

 <! -
    <div> Любой, фон html css img, что угодно. 

-> $ (документ) .ready (функция () { $ (»Pre.i-ам-ленивый») LazyLoad (). });

Таким образом, в основном вы оборачиваете содержимое, которое хотите лениво загружать, тегом-заполнителем и внутренним html-комментарием. Когда заполнитель становится видимым в области просмотра, он заменяется строкой html внутри комментария.

Вы можете использовать любой тег для заполнителя, но мне нравится pre, потому что он отображается как 0 измерение, когда внутри только комментарий.

Надеюсь, это поможет! @ MW_Collins

Answer 4

Вот еще два плагина JQuery, которые выполняют ленивую загрузку / бесконечную прокрутку:

http://jscroll.com/

http://www.infinite -scroll.com / бесконечномерным прокрутки JQuery-плагин /