web-dev-qa-db-ja.com

jQuery無限スクロール/遅延読み込み

現在、自分のウェブサイトを再設計しており、JavaScriptとjQueryの使用を検討しています。これが私がこれまでに持っているものです： http://www.tedwinder.co.uk/gallery2/ 。

私のビジョンは、すべての写真を1ページに収め、ユーザーが今と同じようにスクロールできるようにすることです。ただし、1ページに50以上の大きめの画像があることの制限と影響を理解しており、無限スクロールと遅延読み込みの使用を検討しました。これは、ユーザーが画像にアクセスしたとき、またはユーザーが「もっと」リンク？

だから、私の質問です：これはページの読み込みを減らしますか？無限スクロール/レイジー読み込みを実装するにはどのように正確に行きますか？これは効果的に機能しますか？

おかげで、テッド

javascriptjqueryscrolllazy-loadinginfinite
21
Ted

これは、画像の遅延読み込みを処理するjQuery用の非常に優れたプラグインです。

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

スクロールせずに見える範囲の画像は、スクロールして表示するまで読み込まれません。

それはあなたのサイトの帯域幅を削減しますが、あなたが多くのトラフィックを持っていない場合、それは大きな違いはありません。

このテクニックの使用例については、 http://mashable.com/ をチェックしてください。

12
Pepper

このjQuery Lazy Scroll Loading Pluginを試してください http://code.google.com/p/jquerylazyscrollloading/

4
h920526

私が書いたこの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>

したがって、基本的に、遅延読み込みするコンテンツをプレースホルダータグと内部のhtmlコメントでラップします。プレースホルダーがビューポートに表示されるようになると、コメント内のHTML文字列に置き換えられます。

プレースホルダーには任意のタグを使用できますが、内部にコメントしかない場合は0次元としてレンダリングされるので、私はpreが好きです。

お役に立てれば！ @MW_Collins

3
Michael Collins

次に、遅延読み込み/無限スクロールを行う2つのJQueryプラグインを示します。

http://jscroll.com/

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

0
Paul B. Hartzog