Automatically load content on scroll with jQuery

var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading === false){ loading = true; $('#loadingbar').css("display","block"); $.get("load.php?start="+$('#loaded_max').val(), function(loaded){ $('body').append(loaded); $('#loaded_max').val(parseInt($('#loaded_max').val())+50); $('#loadingbar').css("display","none"); loading = false; }); } } }); $(document).ready(function() { $('#loaded_max').val(50); });
Some websites such as Twitter loads content on scroll.

Which means that all content is dynamically loaded on a single page as long as you scroll down.

Source: http://fatfolderdesign.com/173/content-load-on-scroll-with-jquery

Example running on: http://fatfolderdesign.com/ex/scroll_load/

#scroll #load #content #dynamic #jQuery

@cesarnog

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.