Home » Javascript » jQuery load more data on scroll

jQuery load more data on scroll

Posted by: admin November 30, 2017 Leave a comment

Questions:

I am just wondering how can i implement more data on scroll only if the div.loading is visible.

Usually we look for page height and scroll height, to see if we need to load more data. but the following example is little complicated then that.

Following image is perfect example. there are two .loading div’s on the drop down box. When user scroll the content, whichever is visible it should start loading more data for it.

enter image description here

So how can i find out if .loading div is visible to user yet or not? So i can start loading data for that div only.

Answers:

In jQuery, check whether you have hit the bottom of page using scroll function. Once you hit that, make an ajax call (you can show a loading image here till ajax response) and get the next set of data, append it to the div. This function gets executed as you scroll down the page again.

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

Questions:
Answers:

Have you heard about the jQuery Waypoint plugin.

Below is the simple way of calling a waypoints plugin and having the page load more Content once you reaches the bottom on scroll :

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

Questions:
Answers:

Here is an example:

  1. On scrolling to the bottom, html elements are appeneded. This appending mechanism are only done twice, and then a button with powderblue color is appended at last.
<!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>