6

私はブログ投稿のリストを持っていて、その数は25以上に達していますが、それはすべて1ページにあるので、怠惰なローダーを構築する必要があります。

さまざまなプラグインを試しましたが、どれも機能していません

http://jsfiddle.net/tara_irvine/S9GGz/6/

http://jsfiddle.net/tara_irvine/S9GGz/9/

http://jsfiddle.net/tara_irvine/S9GGz/13/

divの最上位値を確認する方法はありますか？それが表示されている場合は、divが表示されるようにクラスが追加されます（divが非表示になっているページの読み込み）

私はこれらの投稿を見てきましたが、さまざまな解決策を試した後、どれもうまくいきませんでした。

ビューポートの上部に関連するDivのjquery位置を使用して要素がユーザーのビューにあるかどうかを確認する方法

誰かがこれに光を当てることができれば、私は非常に感謝するでしょう。どこが悪いのかわかりません。

どうもありがとう

4

5 に答える 5

7

jQuery Waypointsは、表示される要素に反応するための優れたプラグインです。遅延読み込みの例もあります。

于 2012-08-15T09:58:28.210 に答える
2

セットアップがどのようになっているのかわかりませんが、jqueryを使用してページ上部からの距離を確認することをお勧めします。これは次のようになります。

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

このスタックオーバーフローの投稿に従って：javascriptを使用してdivの上部からウィンドウの上部までの距離を決定します

それぞれに番号付きのIDまたは名前を付けて、25番目の投稿に適用します（ページはPHPで生成されていると思います）。

次に、距離が特定の量に達したときに、ajaxを使用してより多くのブログ投稿をロードします。

編集：jqueryを大なり記号で使用して非表示にすることができます：

$(".element-class:gt(24)").css("display","none");​

ここのドキュメント：http：//api.jquery.com/gt-selector/

次に、特定のスクロールトップを超えてスクロールする場合は、

$("visible-element").css("display","block")

編集2：このフィドルを試してください-http: //jsfiddle.net/addiktedDesign/KjNnY/

于 2012-08-19T12:34:31.467 に答える
1

要素の上部を取得し、ビューポートにあるときにコンテンツを表示しようとしましたが、コンテンツはajax呼び出しから非表示またはロードされる可能性があります。このコードを試してください。感度変数を試して、何が最も効果的かを確認できます。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
        var processScroll = true;
        var sensitivity = 10;
        function handleScroll()
        {
            if (processScroll) {
                processScroll = false;
                topHidden = $('.block_hidden:first').offset().top;
                if(($(window).scrollTop() + $(window).height() ) > (topHidden + sensitivity))
                {
                    console.log('show now');
                    $('.block_hidden:first').removeClass('block_hidden').addClass('block');
                }
            }

            processScroll = true;
        }

        $(document).ready(function()
        {
            $(window).scroll(handleScroll);
        });
    </script>

    <style>
        .block_hidden{
            width:300px;
            background: green;
            margin:5px;
            visibility: hidden;
            height: 10px !important;
        }

        .block{
            height: 200px;
            width:300px;
            background: green;
            margin:5px;
        }
    </style>

</head>
<body>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
    <div class="block_hidden"></div>
</body>
</html>
于 2012-08-21T17:16:58.267 に答える
1

http://archive.plugins.jquery.com/project/lazyloadは、遅延読み込みプラグインのリストですが、画像の読み込みに関するものです。

試すことができるのは、最初の3つを除いて、各ブログ投稿要素を非表示にしてから、

于 2012-08-13T09:51:43.947 に答える
1

遅延読み込みについて質問しています。

答えにはサーバー側が含まれている必要があります。あなたの質問は、使用しているサーバー側言語のタイプを指定していません。私の答えでは、ランダムなブログ投稿をモックするためにいくつかの基本的なPHPコードを使用します。

遅延読み込みとは、ユーザーが表示できるものだけを読み込み、後で必要に応じてさらにデータを読み込むことを意味します。

データの読み込みとは、サーバーにデータを要求することを意味します。これには通常AJAXが関係しますが、必ずしもそうとは限りません。（おそらくAJAXを使用できますが）。JQueryには素晴らしいajaxインターフェースがあります。

最大の問題は、次のロードをトリガーするもの、つまりすべてのプラグインです。

Tgrのアドバイスを受けて、ウェイポイントを使用して遅延読み込みを実装しました。Tgrが提案したように、遅延読み込みにウェイポイントチュートリアルを使用しました（Tgrにもっとポイントを与えてください）。

あなたは私のサイトで私の実装を見ることができます

私が作ったのは、タイトルを変更した模擬ブログ投稿でした。ユーザーが十分に下にスクロールするたびに、サーバーからより多くの投稿を取得します。

ソースのダウンロードリンクを追加したので、ダウンロードして試してみることができます。走るだけmain.htmlでいいです。

このファイルは、ランダムなタイトルmore_posts.phpの投稿を生成します。lorem ipsum（ページをスクロールするには、偽のコンテンツが必要でした）。

こんな感じ

<h1> This is post number <?php echo uniqid("",true)?> </h1>

<div style="color:red">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>

<div style="color:blue">
Lorem ipsum dolor .... Quisque ut pretium nibh.
</div>

ご覧のとおり、私が持っている唯一のPHPコードは、タイトルにランダムなものを追加することです。

ブログにはすでに25以上の投稿があるので、これは見覚えがあるはずです。

本当の論理はそこにありmain.htmlます-HTML部分はそのように見えます

<section id="container">

    </section>

    <footer>
        <nav>
            <ul>
                <!-- Hijack this link for the infinite scroll -->
                <li class="more"><a href="more_posts.php" title="Traditional navigation link">Next Page</a></li>
            </ul>
        </nav>
    </footer>

アイデアはsection、最初のいくつかの投稿を含むものであり、ページをスクロールすることができます。下部にmoreリンクがありfooter、JavaScriptが無効になっている場合は、通常の「次の」リンクとして機能する必要があります。

Waypointはこのリンクを使用して、次のロードをトリガーします。リンクが画面に表示されようとしているときはいつでも、ajaxを使用して次の投稿を自動的に取得します。

したがって、JavaScriptの部分は次のようになります。

$(document).ready(function() {

    function loadMorePosts( callback ){
        $.get($('.more a').attr('href'), function(data) { 
                $('#container').append($(data)); 
                if ( typeof(callback) == "function" ){ callback(); }
        })
    }
    loadMorePosts();

    var $footer = $('footer');
    var opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
                        $footer.waypoint('remove');
                        loadMorePosts( function(){ $footer.waypoint(opts);} );


            }, opts);
});

この関数は、のより単純な構文であるloadMorePostsメソッドを呼び出します。リンクのhref属性と同じURLを使用します。私の例では、href属性は「more_posts.php」を指しています。$.get$.ajax({type:'GET' .. })

デモが読み込まれると、コンテンツは完全に空になっているので、先に進んで、表示したい最初の投稿を取得します。次に、ウェイポイントにフッターを聞くように指示します。フッターが近くにあるときはいつでも、さらに投稿を取得します。

ウェイポイントをフッターにバインドするaをもう一度実行$footer.waypoint('remove')して渡すというトリッキーな部分があります。これは単なる技術です。ウェイポイントでは、HTMLをさらにフェッチするときにトリガーを削除する必要があります。そうしないと、ページがおかしくなる可能性があります。callbackloadMorePosts

これは多かれ少なかれそれです。

私はこれをできるだけ単純にしようとしましたが、1つの答えでカバーすることは大きな問題です。それで、私が物事を片付けるためにもっとできるかどうか私に知らせてください。

于 2012-08-21T20:29:30.870 に答える