当前位置: 首页 > 知识库问答 >
问题:

jQuery在滚动中加载更多数据

柯天宇
2023-03-14

我只是想知道,只有在div.loading可见的情况下,如何才能在scroll上实现更多的数据。

通常我们寻找页面高度和滚动高度,看看我们是否需要加载更多的数据。但是下面的例子有点复杂。

下面的图片是完美的例子。下拉框上有两个。加载div。当用户滚动内容时,无论哪个可见,都应该开始为其加载更多数据

因此,我如何才能找出是否加载div是可见的用户呢?所以我可以开始加载该div的数据。

共有3个答案

邵阳德
2023-03-14

以下是一个例子:

  1. 在滚动到底部时,html元素被附加。这种附加机制只做了两次,最后附加了一个粉蓝色的按钮。
<!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>
龙德海
2023-03-14

你听说过jQuery航点插件吗?

下面是调用航点插件并让页面加载更多内容的简单方法,一旦你到达滚动底部:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</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);
});
孙海
2023-03-14

在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
    }
});
 类似资料:
  • 本文向大家介绍jquery滚动加载数据的方法,包括了jquery滚动加载数据的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博、QQ空间等。 代码如

  • 本文向大家介绍vue2滚动条加载更多数据实现代码,包括了vue2滚动条加载更多数据实现代码的使用技巧和注意事项,需要的朋友参考一下 解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高

  • 在聊天发送信息 this.form.id是对方的聊天用户id,this.form.page初始化为0,是拿到getChatDataOld最新的数据,在这些代码中向上加载拿到this.messagescontent[0].id下标第一次的id加载更多历史数据,现在遇到的问题是第一次点击切换用户,往上加载更多历史数据没有问题,当切换用户再切换回来,向上滚动不会再加载历史更多数据了,大佬们,怎么处理这个

  • js部分 vue聊天框向上滚动加载更多,比如this.form.page是10条信息,滚动到这里有个查看更多信息的字眼,再向上滚动加载数据,getChatDataOld这个是加载接口,或者点击查看更多信息向上滚动加载,这样的功能怎么实现呢

  • 定义 滚动加载组件,可选方向(向上滚动、向下滚动)。 图片展示 代码演示 import InfiniteLoader from 'pile/dist/components/infiniteloader' import PermissionsCard from 'pile/dist/components/permissionsCard' const _Ringloading = React.cre

  • 这是我的代码: 我想滚动我的卷轴,但不能,因为#refresh重新加载每3000。有人知道如何解决这个问题吗?