jsはwebページのスクロールバーのドロップダウンを実現する際により多くのロードを実現する

2890 ワード

jsはwebページのスクロールバーのドロップダウンを実現する際により多くのロードを実現する
携帯電話では、データリストのページングはすべてドロップダウンしたときにより多くロードされますが、昨年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()リスニングスクロールイベントは実行されません