jsはwebページのスクロールバーのドロップダウンを実現する際により多くのロードを実現する
2890 ワード
jsはwebページのスクロールバーのドロップダウンを実現する際により多くのロードを実現する
携帯電話では、データリストのページングはすべてドロップダウンしたときにより多くロードされますが、昨年3月に顧客からwebページもドロップダウンしてより多くロードするように要求されたので、webページがスクロールバーのドロップダウン時により多くのコンテンツ(個人項目経験)をロードしたコードに基づいてこのドロップダウンロードを実現しました.簡単です.コードは以下の通りです.
しかし、今日のテスト担当者は、ブラウザがスケールしたり、画面に表示されてスケールを設定したりすると、ドロップダウンロードできないことを発見しました.1年ぶりくらいで驚きました@@
デバッグの結果、スケールがある場合の
スクロールバーを最後まで引っ張ってからロードすると、ユーザー体験に影響します.一般的に動的にロードする場合は、サービス側にリソースを要求する必要があるため、時間がかかります.より好ましい方法は、スクロールバーが下部から一定距離(C)離れている場合、より多くのリソースを動的にロードし、サービス側にリソースを要求することである.つまり、プリロード、プリフェッチです.式は次のとおりです.
this.scrollHeight - C == $(this).scrollTop() + $(this).height()
読み終わったらヒントを得てpositionValueの値を-10以上に設定します.ここでの10はスクロールバーが底から一定距離(C)離れた値です.やはり、大丈夫です.ズームがあるときも通常のドロップダウンロードが可能です.
そこで、記録して、みんなに分かち合って、共に努力します.
もう一つ注意して、$(window).scroll(function()リスニングスクロールイベントは、この質問の回答を実行しません.
html,bodyの高さスタイルを100%に設定すると,
コード#コード#
関連リファレンス
Webページはスクロールバーのドロップダウン時により多くのコンテンツ(個人プロジェクト経験)をロードドロップダウンより多くのDEMO(js実装)$(window)をロードする.scroll(function()リスニングスクロールイベントは実行されません
携帯電話では、データリストのページングはすべてドロップダウンしたときにより多くロードされますが、昨年3月に顧客からwebページもドロップダウンしてより多くロードするように要求されたので、webページがスクロールバーのドロップダウン時により多くのコンテンツ(個人項目経験)をロードしたコードに基づいてこのドロップダウンロードを実現しました.簡単です.コードは以下の通りです.
var totalPages;//
var pageno = 0;//
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
var positionValue = (scrollTop + windowHeight) - scrollHeight;
if (positionValue == 0) {
//do something
if (pageno < totalPages - 1) {
pageno++;
doSomething(pageno);
} else {
alert(' ');
}
}
});
);
function doSomething(pageno) {
var url = "*******";//
var data = {
size: 5,
start: pageno,
};
$.getJSON(url, data, function (rtn) {
});
}
しかし、今日のテスト担当者は、ブラウザがスケールしたり、画面に表示されてスケールを設定したりすると、ドロップダウンロードできないことを発見しました.1年ぶりくらいで驚きました@@
デバッグの結果、スケールがある場合の
positionValue
の値は0に等しくなく、より多くのロードを続けることはできません.このとき、ドロップダウンでより多くのDEMO(js実装)をロードする記事を見て、次のように説明します.スクロールバーを最後まで引っ張ってからロードすると、ユーザー体験に影響します.一般的に動的にロードする場合は、サービス側にリソースを要求する必要があるため、時間がかかります.より好ましい方法は、スクロールバーが下部から一定距離(C)離れている場合、より多くのリソースを動的にロードし、サービス側にリソースを要求することである.つまり、プリロード、プリフェッチです.式は次のとおりです.
this.scrollHeight - C == $(this).scrollTop() + $(this).height()
読み終わったらヒントを得てpositionValueの値を-10以上に設定します.ここでの10はスクロールバーが底から一定距離(C)離れた値です.やはり、大丈夫です.ズームがあるときも通常のドロップダウンロードが可能です.
そこで、記録して、みんなに分かち合って、共に努力します.
もう一つ注意して、$(window).scroll(function()リスニングスクロールイベントは、この質問の回答を実行しません.
html,bodyの高さスタイルを100%に設定すると,
$(window).scroll
メソッドは、正しいロールアウト高さ(0)が検出されず、スクロールリスニングイベントが失効し、設定されます.html,body{ height:auto }
は解決できる.コード#コード#
var totalPages;//
var pageno = 0;//
var C = 10;//
$(function(){
$(window).scroll(function() {
var scrollTop = $(this).scrollTop(),scrollHeight = $(document).height(),windowHeight = $(this).height();
var positionValue = (scrollTop + windowHeight) - scrollHeight;
if (positionValue >= -C) {
//do something
if (pageno < totalPages - 1) {
pageno++;
doSomething(pageno);
} else {
alert(' ');
}
}
});
);
function doSomething(pageno) {
var url = "*******";//
var data = {
size: 5,
start: pageno,
};
$.getJSON(url, data, function (rtn) {
});
}
関連リファレンス
Webページはスクロールバーのドロップダウン時により多くのコンテンツ(個人プロジェクト経験)をロードドロップダウンより多くのDEMO(js実装)$(window)をロードする.scroll(function()リスニングスクロールイベントは実行されません