jQuery在滚动上加载更多数据-Java 学习之路

117

我只是想知道如果div.loading可见，我怎么能在滚动上实现更多的数据 .

通常我们会查找页面高度和滚动高度，以查看是否需要加载更多数据 . 但是下面的例子比那复杂一点 .

下图是完美的例子 . 在下拉框中有两个.loading div . 当用户滚动内容时，无论哪个都可见，它应该开始为其加载更多数据 .

enter image description here

那么我怎样才能知道.din div是否对用户可见？所以我可以开始只加载该div的数据 .

6 回答

7
如果不是所有文档都滚动，比如说，当你在文档中滚动 div 时，上面的解决方案赢得了't work without adaptations. Here'如何检查div的滚动条是否触及底部：
```
$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
```
回复于 2024-05-06T11:04:32+08:00

你听说过jQuery Waypoint plugin吗？

下面是调用waypoints插件并让页面在滚动到达底部时加载更多内容的简单方法：

$(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);
});

回复于 2024-05-06T11:04:32+08:00

我花了一些时间试图找到一个很好的函数来包装解决方案 . 无论如何，最终得到了这个，当我在一个页面或整个网站上加载多个内容时，我觉得这是一个更好的解决方案 .

Function:

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;
            }
        }

然后，您可以使用滚动窗口调用该函数（例如，您也可以将其绑定到点击等，因为我也这样做，因此函数）：

To use:

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html"); 

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html"); 
    });

这种方法也应该适用于滚动div等 . 我希望它有所帮助，在上面的问题中你可以使用这种方法加载你的内容分段，也许附加，从而运球喂所有图像数据而不是批量输入 .

我使用这种方法来减少https://www.taxformcalculator.com的开销 . 如果您查看网站并检查元素等，您可以看到对Chrome中页面加载的影响（作为示例） .

回复于 2024-05-06T11:04:32+08:00

237

这是一个例子：

在滚动到底部时，会显示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.
Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button>

');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.

        </p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
        <p >This is test data.
Next line.</p>
    </div>
</body>
</html>

回复于 2024-05-06T11:04:32+08:00

0
当窗口放大到> 100％的值时，此问题的接受答案与chrome存在一些问题 . 以下是chrome开发人员推荐的代码，作为我在同一时间提出的错误的一部分 .
```
$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});
```
以供参考：

Related SO question

Chrome Bug
回复于 2024-05-06T11:04:32+08:00
83
在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
    }
});
```
回复于 2024-05-06T11:04:32+08:00

jQuery在滚动上加载更多数据

6 回答

相关问题