div.loadingが表示されている場合にのみ、スクロールでより多くのデータを実装する方法を知りたいだけです。
通常、ページの高さとスクロールの高さを探して、さらにデータを読み込む必要があるかどうかを確認します。次の例は少し複雑です。
次の画像は完璧な例です。ドロップダウンボックスには2つの.loading divがあります。ユーザーがコンテンツをスクロールすると、どちらが表示されていても、コンテンツの読み込みが開始されます。
では、.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
}
});
var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop() + $(window).height(); var distance = end - viewEnd; if (distance < 300) // do load
jQuery Waypointプラグインについて聞いたことはありますか。
以下は、ウェイポイントプラグインを呼び出し、スクロールで一番下に到達したときにページにさらにコンテンツをロードさせる簡単な方法です。
$(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);
});
次に例を示します。
<!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>すべてのドキュメントがスクロールしない場合、たとえば、divドキュメント内にスクロールがある場合、上記のソリューションは適応なしでは機能しません。divのスクロールバーが下部に達したかどうかを確認する方法は次のとおりです。
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});
私は、ソリューションをラップするための素晴らしい関数を見つけることに少し時間を費やしました。とにかく、これは、単一のページまたはサイト全体に複数のコンテンツをロードするときに、より良い解決策であると私が思うこれで終わりました。
関数：
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でのページ読み込みへの影響を確認できます（例として）。
@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つの新しいデータが追加されるまで呼び出しをブロックするために使用されます。
お役に立てれば。
具体的には、ユーザーがページの最後に到達したときではなく、divが表示されたときのデータの読み込みについて質問します。
これがあなたの質問に対する最良の答えです：https : //stackoverflow.com/a/33979503/3024226
new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);最初の行は要素を適切に追加し、2番目は関数がページの下部で停止しないことを保証します。