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.
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.
This question is related to
javascript
jquery
ajax
scroll
The answer is
Here is an example:
- 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>_x000D_
<html>_x000D_
<head>_x000D_
<title>Demo: Lazy Loader</title>_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>_x000D_
<style>_x000D_
#myScroll {_x000D_
border: 1px solid #999;_x000D_
}_x000D_
_x000D_
p {_x000D_
border: 1px solid #ccc;_x000D_
padding: 50px;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.loading {_x000D_
color: red;_x000D_
}_x000D_
.dynamic {_x000D_
background-color:#ccc;_x000D_
color:#000;_x000D_
}_x000D_
</style>_x000D_
<script>_x000D_
var counter=0;_x000D_
$(window).scroll(function () {_x000D_
if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {_x000D_
appendData();_x000D_
}_x000D_
});_x000D_
function appendData() {_x000D_
var html = '';_x000D_
for (i = 0; i < 10; i++) {_x000D_
html += '<p class="dynamic">Dynamic Data : This is test data.<br />Next line.</p>';_x000D_
}_x000D_
$('#myScroll').append(html);_x000D_
counter++;_x000D_
_x000D_
if(counter==2)_x000D_
$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');_x000D_
}_x000D_
</script>_x000D_
</head>_x000D_
<body>_x000D_
<div id="myScroll">_x000D_
<p>_x000D_
Contents will load here!!!.<br />_x000D_
</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
<p >This is test data.<br />Next line.</p>_x000D_
</div>_x000D_
</body>_x000D_
</html>Improving on @deepakssn answer. There is a possibility that you want the data to load a bit before we actually scroll to the bottom.
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] is used to block the call until one new data is appended.
Hope this helps.
I suggest using more Math.ceil for avoid error on some screen.
Because on a few different screens it's not absolutely accurate
I realized that when I console.log.
console.log($(window).scrollTop()); //5659.20123123890
And
console.log$(document).height() - $(window).height()); // 5660
So I think we should edit your code to
$(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
}
});
Or Allow load data from server before scroll until bottom.
if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 200)) {
// Load data
}
You question specifically is about loading data when a div falls into view, and not when the user reaches the end of the page.
Here's the best answer to your question: https://stackoverflow.com/a/33979503/3024226
I spent some time trying to find a nice function to wrap a solution. Anyway, ended up with this which I feel is a better solutions when loading multiple content on a single page or across a site.
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;
}
}
You can then call the function using window on scroll (for example, you could also bind it to a click etc. as I also do, hence the function):
To use:
$(window).scroll(function (event) {
ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html");
ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html");
});
This approach should also work for scrolling divs etc. I hope it helps, in the question above you could use this approach to load your content in sections, maybe append and thereby dribble feed all that image data rather than bulk feed.
I used this approach to reduce the overhead on https://www.taxformcalculator.com. It died the trick, if you look at the site and inspect element etc. you can see impact on page load in Chrome (as an example).
The accepted answer of this question has some issue with chrome when the window is zoomed in to a value >100%. Here is the code recommended by chrome developers as part of a bug i had raised on the same.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()){
//Your code here
}
});
For reference:
If not all of your document scrolls, say, when you have a scrolling div within the document, then the above solutions won't work without adaptations. Here's how to check whether the div's scrollbar has hit the bottom:
$('#someScrollingDiv').on('scroll', function() {
let div = $(this).get(0);
if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
// do the lazy loading here
}
});
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…</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);
});
Source: Stackoverflow.com