web-dev-qa-db-ja.com

jQueryはスクロール時により多くのデータをロードする

Div.loadingが表示されている場合にのみ、スクロールにもっと多くのデータを実装することができるのでしょうか。

通常、ページの高さとスクロールの高さを調べて、さらにデータをロードする必要があるかどうかを確認します。しかし、次の例はそれほど複雑ではありません。

次の画像はその一例です。ドロップダウンボックスに2つの.loading divがあります。ユーザーがコンテンツをスクロールすると、どちらが表示されていても、それ以上のデータのロードが開始されます。

enter image description here

それでは、どのように私は.loading divがまだユーザーに見えるかどうかを調べることができますか？だから私はそのdivだけのデータのロードを開始することができます。

javascriptjqueryajaxscroll
131
Basit

JQueryで、スクロール機能を使用してページの下部にヒットしたかどうかを確認してください。それに遭遇したら、ajax呼び出しを行い（あなたがここでajax応答までロード中の画像を表示することができます）そして次のデータのセットを取得し、それをdivに追加します。この関数は、ページをもう一度スクロールダウンすると実行されます。

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});
261
deepakssn

jQuery Waypointプラグイン について聞いたことがありますか。

以下は、ウェイポイントプラグインを呼び出して、スクロールで一番下に達したときにページにもっと多くのコンテンツをロードさせる簡単な方法です。

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});
85
defau1t

これが一例です。

  1. __コード__.
<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
                var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
                        counter++;
                        
                        if(counter==2)
                        $('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>
9
Om Prakash Sao

この質問の一般的な回答では、ウィンドウが100％を超える値に拡大されたときにchromeに関する問題が発生しています。これは私が同じ上で上げたバグの一部としてクロム開発者によって推奨されるコードです。

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});

参考のため：

関連するSO質問

Chromeのバグ

5
Prasanth K C

あなたの文書のすべてがスクロールしない場合、例えばあなたが文書内でスクロールdivを持っているとき、上記の解決策は適応なしでは動作しません。 divのスクロールバーが下に当たったかどうかを確認する方法は次のとおりです。

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
1
The Coprolal

私は時間をかけて解決策をラップするためのNice関数を見つけようとしました。とにかく、これで終わりました私が感じるのは、単一のページまたはサイト全体に複数のコンテンツをロードする場合の方が良い解決策です。

機能：

function ifViewLoadContent(elem, LoadContent)
    {
            var top_of_element = $(elem).offset().top;
            var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            if(!$(elem).hasClass("ImLoaded"))   {
                $(elem).load(LoadContent).addClass("ImLoaded");
            }
            }
            else {
               return false;
            }
        }

それから、スクロール上のウィンドウを使用して関数を呼び出すことができます（例えば、私もそうであるようにクリックなどにそれをバインドすることもできます、それ故に関数です）：

使用方法：

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html"); 

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html"); 
    });

このアプローチはdivのスクロールなどにも有効です。上の質問では、このアプローチを使用してコンテンツをセクションにロードし、一括フィードではなく追加してすべての画像データをドリブルすることができます。

私は https://www.taxformcalculator.com のオーバーヘッドを減らすためにこのアプローチを使いました。サイトを見て要素などを調べれば（例として）Chromeでのページ読み込みへの影響を見ることができます。

0
Pete - iCalculator