I made an example calculating the distance of the div Loader in relation to the screen. When the Loader enter the screen, the content will be loaded. In the example I simulate a page with height of 2000px to illustrate the input and output of the div Loader and calculated values. You can see here at jsfiddle.
This server template for you to use the div loader
as reference. It is also possible to anticipate the space with $('#loader').offset().top - 50
, so the event will run 50px before the Clicker hits the screen. When you enter the Upload, the content will already be loaded, without the user having to reach the end to load more.
I created another jsfiddle with a simple example, but closer to a infinite scroll
, but only as an illustration of how to calculate the input of an element that serves to trigger the event. Adapt to your need.
content page 1
content page 2
content page 3
...
Loading next page
JS base
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var elementOffset = $('#loader').offset().top;
var distance = (elementOffset - scrollTop);
if( distance < $(window).height() ){
// elemento 'loader' entrou na tela, hora de carregar mais uma página
$.post( 'artes4.php' , { ... }, function( data2 ){
// adiciona o conteudo na div content mantendo as páginas anteriores
$( "#content" ).append( data2 );
});
}
});
It’s not a good idea for you to keep limit = 5 e offset = 0
as parameters for SQL.
- This 2 information has not been validated
- Paging can be changed and made with more records than defined.
I did an update on jsfiddle and includes page numbering as class attribute - you can use otherwise, change attribute, hidden field... The first listing you assign 1 <div id="loader" class="1">
, which corresponds to page 1 of any listing. Later when you do the Upload via ajax you assign +1 and have your Upload with the reference to page 2, and so on.
JS incrementing pagination as HTML attribute
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var elementOffset = $('#loader').offset().top;
var distance = (elementOffset - scrollTop);
var i = Number( $('#loader').attr('class') ) + 1; // atribui +1 ao loader
if( distance < $(window).height() ){
$('#content').append('<p>Página' + i + '</p>');
$('#loader').attr( 'class' , i )
// elemento 'loader' entrou na tela, hora de carregar mais uma página
// `i` é a representação da página requisitada
$.post( 'artes4.php' , { pagina: i }, function( data2 ){
// adiciona o conteudo na div content mantendo as páginas anteriores
$( "#content" ).append( data2 );
});
}
});
when declaring the variable height does not put var no. instead of var height = 1000; use height = 1000;
– Euler01