Wie implementiert man js Scrolling, um mehr Datencode zu laden?

In diesem Artikel wird hauptsächlich js vorgestellt, um die Funktion zum Scrollen der Bildlaufleiste zum Ende der Seite zu implementieren, um mehr zu laden. Im Vergleich zu den meisten Websites wird isscroll.js zum Implementieren der Pull-Funktion verwendet. Hochladen, um mehr zu laden, oder die Pulldown-Funktion, um sie zu aktualisieren. Einfacher für alle. Die einfache Idee dabei ist, dass alle Daten auf der Seite entsprechend den Anzeigeanforderungen angezeigt werden, welche Teile angezeigt werden und der Rest ausgeblendet wird. Wenn noch Daten vorhanden sind, klicken Sie einfach auf „Weitere Daten laden“ und zeigen Sie die Daten weiter an, bis keine Daten mehr angezeigt werden. Die Meldung „Laden abgeschlossen“ wird angezeigt.

Beim Laden können Sie festlegen, dass „Laden...“ angezeigt wird. Wenn nicht mehr Daten angezeigt werden, können Sie unten eine Schaltfläche „Klicken, um mehr zu laden“ hinzufügen. Bis keine Daten mehr vorhanden sind, wird angezeigt, dass der gesamte Ladevorgang abgeschlossen ist.

js scrollen, klicken Sie, um weitere Daten zu laden. Der spezifische Beispielcode lautet wie folgt:

<div class="loading">
    <div class="hidden"></div>
    <ul class="img-list"><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/1.png" alt="" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/2.png" alt="XC-PH-W02" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/3.png" alt="XC-PH-W06" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li><li class="pic_list_3"><div class="pic_list_li"><div class="img"><a href="www.php.cn"><img  src="img/4.png" alt="XC-PH-W07" width="100" height="100"></a>
    </div><p class="msg"><a href="www.php.cn">示例</a></p><p class="y"> </p></div></li></ul>
    <a href="javascript:;" onclick="loading.loadMore();"><div class="btn-more">点击加载更多</div></a>
</div>
<script src="js/jquery.min.js"></script>
<script>
    var _content = [];//临时存储li循环内容
    var loading = {
        _default : 9,//默认显示图片个数
        _loading : 9,//每次点击按钮后加载的个数
        init : function() {
            var lis = $(".loading .hidden li");
            $(".loading ul.img-list").html("");
            for (var n = 0; n < loading._default; n++) {
                lis.eq(n).appendTo(".loading ul.img-list");
            }
            $(".loading ul.img-list img").each(function() {
                $(this).attr(&#39;src&#39;, $(this).attr(&#39;realSrc&#39;));
            })
            for (var i = loading._default; i < lis.length; i++) {
                _content.push(lis.eq(i));
            }
            $(".loading .hidden").html("");
        },
        loadMore : function() {
            var mLis = $(".loading ul.img-list li").length;
            for (var i = 0; i < loading._loading; i++) {
                var target = _content.shift();
                if (!target) {
                    $(&#39;.loading .btn-more&#39;).html("<p>全部加载完毕</p>");
                    break;
                }
                $(".loading ul.img-list").append(target);
                $(".loading ul.img-list img").eq(mLis + i).each(function() {
                    $(this).attr(&#39;src&#39;, $(this).attr(&#39;realSrc&#39;));
                });
            }
        }
    }
    loading.init();
</script>

Ich hoffe, dass dieser Artikel eine Einführung darüber gibt Verwenden Sie js, um Klicks zu erzielen. Die Möglichkeit, mehr Daten zu laden, hilft allen!

[Empfehlungen für verwandte Artikel]

Wie Jquery Pull-Up-Loading und mehr implementiert

Klicken Sie hier, um mehr basierend auf zu laden Ajax Laden Sie diese Seite ohne Aktualisierung

So implementieren Sie das Scrollen und Laden weiterer Funktionen in Vue

$.ajax+php praktisches Tutorial-Dropdown An Erläuterung des Prinzips, jederzeit automatisch weitere Artikel zu laden

Beispielcode zum Erreichen des Seiten-Pull-Up-Ladeeffekts

Das obige ist der detaillierte Inhalt vonWie implementiert man js Scrolling, um mehr Datencode zu laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!