0

Wordpressのブログページで、jquery .load（）関数を使用してコンテンツを読み込もうとしています。

<div id="s1"> 1 </div>
<div id="s2"> 2 </div>
<div id="s3"> 3 </div>

<script type="text/javascript">
$("#s1").load("/2013 article.item-list");
$("#s2").load("/2013/page/2/ article.item-list");
$("#s3").load("/2013/page/3/ article.item-list");
</script>

ここまでは、すべて正常に動作します。ただし、下にスクロールすると、遅延読み込みのように
コンテンツが読み込まれるようにします。mashable.comのように<div id="s2"><div>

jscrollとInfiniteScrolljQuery Pluginを試してみましたが、これを機能させる方法がわかりません。

ヒントを教えてください！前もって感謝します。

4

2 に答える 2

1

スクロール イベント ハンドラーを使用してから、scrollTop() および innerHeight() を使用して、div の最後にあるかどうかを判断します。別の負荷を呼び出しているとき。

$('#s1').on('scroll', function(){

     if($(this).scrollTop()+ $(this).innerHeight() >= $(this).scrollHeight)
                  $("#s2").load("/2013/page/2/ article.item-list");
});
于 2013-03-19T23:43:09.520 に答える
0

krosullivan のアイデアから、このコードを作成し、正常に動作しました (デモ: http://jsfiddle.net/w7X9N/272/ )。

しかし、私のウェブサイトでこれをテストすると、うまくいきません。それを機能させるには、プロパティを設定height:500px;してoverflow:auto;スタイルを設定する必要があり<div="lazy">ます（私のデモのように）。

何か案は ？

<div id="lazy">
<div id="s1">1</div>
<div id="s2">2</div>
<div id="s3">3</div>
</div>

<script type="text/javascript">
jQuery(
function($) {
    $("#s1").load("/2013/ article.item-list");
    $('#lazy').bind('scroll', function()
    {
        if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
        {
            $("#s2").load("/2013/page/2/ article.item-list");
            $('#lazy').bind('scroll', function()
            {
                if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
                {
                    $("#s3").load("/2013/page/3/ article.item-list");   
                }                                 
            })
        }                                 
    })
});
</script>`
于 2013-03-20T07:54:46.150 に答える