auto_load_jquery_plugin v1.0.5
Auto Loader Jquery Plugin
If you need auto ajax load function when scrolling end, this plugin can help you to achieve it.
Default Settings
scrollContainer: $(document), //optional
loader : null, //optional
bottomOffset : 100, //optional
autoScrollPx : 200, //optional
autoScrollSpeed: 1000, //optional
ajax : {
url : null, //require
method : "GET", //optional
data : null, //optional
dataType : "html", //optional
onSuccess : null, //require
},
responsive : null, //optional
Example 1 : Let say we are working on Product listing. We will have container for product list. we can use auto load on that container as follow.
$(".data_container").autoload({
ajax : {
url : "put your link to call ajax data",
onSuccess : function(response){
$(".data_container").append(response);
}
},
});
//when doing ajax call, page number will added by plugin.
//page number will also increase after each call
//plugin assume page 1 data is already load and will start with page 2 on first ajax call.
To use loading spinner
$(".data_container").autoload({
loader : $(".loader"), //put loader element here, plugin will handle for show / hide action.
ajax : {
url : "put your link to call ajax data",
onSuccess : function(response){
$(".data_container").append(response);
}
},
});
It will auto load next page data when we reach scroll end. but it is not real end point. Default setting for offset point from bottom is 100. We can set our own number. This mean that data loading will happen when we reach the 100px above the scroll end point.
$(".data_container").autoload({
loader : $(".loader"), //put loader element here, plugin will handle for show / hide action.
bottomOffset : 200, //no need to add px
ajax : {
url : "put your link to call ajax data",
onSuccess : function(response){
$(".data_container").append(response);
}
},
});
When you test plugin, you can see scrolling animation when data loading is complete. You may need to customize scrolling length depend on your project.
$(".data_container").autoload({
loader : $(".loader"), //put loader element here, plugin will handle for show / hide action.
autoScrollPx : 500, //when loading finish, scroll up to 500px
autoScrollSpeed : 500, //can adjust the scrolling speed. (milisecond)
ajax : {
url : "put your link to call ajax data",
onSuccess : function(response){
$(".data_container").append(response);
}
},
});
Sometime you many need to set button offset and scrolling length separately for different device. example : 100 for pc and 200 for mobile plugin can support for responsive breakpoint to set
$(".data_container").autoload({
loader : $(".loader"), //put loader element here, plugin will handle for show / hide action.
bottomOffset : 200, //no need to add px
responsive : [
{
breakpoint : 768, //setting will effect when device width <= 768px
bottomOffset : 100, //(optional)if need to overwrite the bottomOffset value on this screen size
autoScrollPx : 500, //(optional)if need to overwrite the autoScrollPx value on this screen size
ajax_url : "put your link",//(optional)if need to overwrite the ajax url value on this screen size
ajax_data : {pagesize: 5}, //(optional)if need to overwrite the ajax url value on this screen size
}
]
ajax : {
url : "put your link to call ajax data",
onSuccess : function(response){
$(".data_container").append(response);
}
},
});
ScrollingContainer
In most case, Scrollingcontainer will be document itself because we want to load data on document scrolling event.Sometime, you may want to use a DIV tag as an scrollingcontainer to control its content.