jQuery滚动加载更多数据

2020/11/09 06:22 · javascript ·  · 0评论

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

通常,我们寻找页面高度和滚动高度,以查看是否需要加载更多数据。但是下面的示例并不那么复杂。

下图是一个很好的例子。下拉框中有两个.loading div。当用户滚动内容时,无论哪个可见,都应开始为其加载更多数据。

在此处输入图片说明

那么,如何确定.loading div是否对用户可见?所以我只能开始为该div加载数据。

在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 Waypoint插件

以下是调用Waypoint插件并使页面加载更多内容后到达滚动条底部的简单方法:

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

这是一个例子:

  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>

当窗口放大到> 100%时,这个问题的可接受答案与chrome有关。这是chrome开发人员推荐的代码,作为我在同一个错误中提出的一部分。

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});

以供参考:

相关的SO问题

Chrome Bug

如果不是所有文档都滚动,例如,当您在文档中滚动时,如果div没有修改,上述解决方案将无法工作。这是检查div的滚动条是否触底的方法:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});

改善@deepakssn答案。您可能希望在实际滚动到底部之前先加载一些数据

var scrollLoad = true;
$(window).scroll(function(){
 if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
    // fetch data when we are 800px above the document end
    scrollLoad = false;
   }
  });

[var scrollLoad]用于阻止调用,直到添加了一个新数据。

希望这可以帮助。

我建议使用更多Math.ceil以避免某些屏幕上的错误。

因为在几个不同的屏幕上并不是绝对准确,


所以我在console.log时意识到了这一点。

console.log($(window).scrollTop()); //5659.20123123890  

console.log$(document).height() - $(window).height()); // 5660

所以我认为我们应该将您的代码编辑为

$(window).scroll(function() {
    if(Math.ceil($(window).scrollTop()) 
       == Math.ceil(($(document).height() - $(window).height()))) {
           // ajax call get data from server and append to the div
    }
});

或滚动到底部之前,允许从服务器加载数据。

if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)) {
 // Load data
}

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

功能:

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

然后,您可以使用滚动窗口来调用该函数(例如,您也可以将其绑定到click等上,因此也可以将其绑定到click等):

使用方法:

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

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

这种方法也应适用于div滚动等。我希望对您有所帮助,在上述问题中,您可以使用这种方法将您的内容加载到各个部分中,还可以追加并从而滴入所有图像数据,而不是批量输入。

我使用这种方法来减少https://www.taxformcalculator.com上的开销如果您查看站点并检查元素等,它就解决了这个难题。您可以看到对Chrome中页面加载的影响(作为示例)。

您的问题特别是关于在div进入视图时加载数据,而不是在用户到达页面末尾时加载数据

这是对您问题的最佳答案:https : //stackoverflow.com/a/33979503/3024226

本文地址:http://javascript.askforanswer.com/jquerygundongjiazaigengduoshuju.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!