div.loadingが表示されている場合にのみ、スクロールにさらに多くのデータを実装するにはどうすればよいのでしょうか。
通常、ページの高さとスクロールの高さを探して、さらにデータをロードする必要があるかどうかを確認します。しかし、次の例はそれより少し複雑です。
次の画像は完璧な例です。ドロップダウンボックスに2つの.loadingdivがあります。ユーザーがコンテンツをスクロールすると、表示されている方のコンテンツのデータの読み込みが開始されます。
では、.loading divがまだユーザーに表示されているかどうかを確認するにはどうすればよいですか？したがって、そのdivのデータのロードのみを開始できます。
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
}
});
jQueryWaypointプラグインについて聞いたことがありますか。
以下は、ウェイポイントプラグインを呼び出し、スクロールの一番下に到達したらページにさらにコンテンツをロードさせる簡単な方法です。
$(document).ready(function() {
var $loading = $("<div class='loading'><p>Loading more items…</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);
});
すべてのドキュメントがスクロールしない場合、たとえば、divドキュメント内にスクロールがある場合、上記のソリューションは適応なしでは機能しません。divのスクロールバーが一番下にあるかどうかを確認する方法は次のとおりです。
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});
次に例を示します。
<!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>@deepakssnの回答を改善します。実際に一番下までスクロールする前に、データを少しロードしたい可能性があります。
var scrollLoad = true;
$(window).scroll(function(){
if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
// fetch data when we are 800px above the document end
scrollLoad = false;
}
});
[var scrollLoad]は、1つの新しいデータが追加されるまで呼び出しをブロックするために使用されます。
お役に立てれば。
一部の画面でのエラーを回避するために、Math.ceilをさらに使用することをお勧めします。
いくつかの異なる画面では、それが完全に正確ではないため、
console.logを実行したときに気づきました。
console.log($(window).scrollTop()); //5659.20123123890
と
console.log$(document).height() - $(window).height()); // 5660
したがって、コードを次のように編集する必要があると思います
$(window).scroll(function() {
if(Math.ceil($(window).scrollTop())
== Math.ceil(($(document).height() - $(window).height()))) {
// ajax call get data from server and append to the div
}
});
または、一番下までスクロールする前にサーバーからのデータのロードを許可します。
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)) {
// Load data
}
ソリューションをラップするための優れた関数を見つけるために、しばらく時間を費やしました。とにかく、これは、単一のページまたはサイト全体に複数のコンテンツをロードする場合のより良い解決策であると私が感じる結果になりました。
働き：
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でのページの読み込みへの影響を確認できます（例として）。
具体的には、ユーザーがページの最後に到達したときではなく、divが表示されたときにデータをロードすることについて質問します。
これがあなたの質問に対する最良の答えです：https ：//stackoverflow.com/a/33979503/3024226