21

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

私のビジョンは、現在のようにユーザーがスクロールできる 1 ページにすべての写真を掲載することです。ただし、1 つのページに 50 以上の大きな画像を配置することの制限と影響を理解しており、無限スクロールと遅延読み込みの使用を検討しました。 「もっと」リンク？

それで、私の質問は次のとおりです:これはページの読み込みを減らしますか、無限スクロール/遅延読み込みをどのように実装しますか?これは効果的に機能しますか、またはこれを行うより効果的な方法を考えてもらえますか?

ありがとう、テッド

4

4 に答える 4

12

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

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

折り目の下の画像は、スクロールして表示されるまで読み込まれません。

それはあなたのサイトの帯域幅を減らします、しかしあなたがたくさんのトラフィックを持っていなければそれは大した違いをもたらさないでしょう。

使用されているこの手法の例については、http：//mashable.com/をチェックしてください。

于 2010-01-31T14:02:08.540 に答える
4

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

于 2012-11-10T07:23:03.063 に答える
3

私が書いたこの jQuery プラグインを試すことができます。これは、html コメントを使用して、画像を含む html の任意のビットを遅延ロードします。

jQuery レイジー ローダーのブログ投稿

jQuery Lazy Loader プラグイン ページ

次に例を示します。

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

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–&gt;</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

于 2011-04-20T14:11:07.767 に答える
0

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

http://jscroll.com/

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

于 2013-10-11T13:05:55.073 に答える