Подтвердить что ты не робот

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

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

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

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

Спасибо, Тед

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

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

Для примера этого используемого метода ознакомьтесь с http://mashable.com/

Ответ 3

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

Сообщение jQuery Lazy Loader

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

Вот пример:

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

<pre class="i-am-lazy" ><!–
    <div>Any, html css img background, whatever. <img src="some.png" /> </div>
–></pre>

<script type="text/javascript" src="jquery.lazyloader.js" ></script>
<script type="text/javascript" >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

Итак, в основном вы завершаете контент, который хотите ленить, загружать тегом placeholder и внутренним комментарием html. Когда заполнитель становится видимым в окне просмотра, он заменяется на строку html внутри комментария.

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

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