I made a script that imports images from a CMS for Wordpress and does not overload the server and the import machine. This system has a page that displays 20 elements per page:
I would like to know if there would be a way for the jquery to run this page and at the end of loading it the jquery switch to the next page preventing me from having to ta clicking on next direct and making the process a little faster:
You can use the .scroll() event in your window , something like this:
$(window).scroll(function() {
if( $(window).scrollTop() + $(window).height() == $(document).height() ) {
var url = document.URL;
var pageNumber = url.split('=')[1];
var newUrl = "http://localhost/sistema_importa/base_importat.php?pagina=" + pageNumber;
$(location).attr('href', newUrl);
}
});
If you want the page to be reloaded when the user comes near the end, use this here:
$(window).scroll(function() {
if( $(window).scrollTop() + $(window).height() > $(document).height() - 100 ) {
var url = document.URL;
var pageNumber = url.split('=')[1] + 1;
var newUrl = "http://localhost/sistema_importa/base_importat.php?pagina=" + pageNumber;
$(location).attr('href', newUrl);
}
});
* Where 100 of the condition represents the size in pixels relative to the end of the page, you can change to the number you want.
But I do not recommend this solution, I advise you to use some Infinite Scroll/Lazy Loading plugin.