标签:style content targe on() pos set ops target top
当阅读到页面最底端的时候,会自动显示一个“加载中”的功能,并自动从服务器端无刷新的将内容下载到本地浏览器显示。
这样的自动加载功能是如何实现的?jQuery的插件 ScrollPagination 可以帮助实现这个功能。
这里是ScrollPagination 功能的原型化代码,
$(function() { $(‘#content‘).scrollPagination({ ‘contentPage‘: ‘democontent.html‘, // the page where you are searching for results ‘contentData‘: {}, // you can pass the children().size() to know where is the pagination // who gonna scroll? in this example, the full window ‘scrollTarget‘: $(window), // how many pixels before reaching end of the page would loading start? ‘heightOffset‘: 10,positives numbers only please ‘beforeLoad‘: function() { // before load, some function, maybe display a preloader div $(‘.loading‘).fadeIn(); }, // after loading, some function to animate results and hide a preloader div ‘afterLoad‘: function(elementsLoaded){ $(‘.loading‘).fadeOut(); var i = 0; $(elementsLoaded).fadeInWithDelay(); // if more than 100 results loaded stop pagination (only for test) if ($(‘#content‘).children().size() > 100){ $(‘#content‘).stopScrollPagination(); } } }); // code for fade in element by element with delay $.fn.fadeInWithDelay = function(){ var delay = 0; return this.each(function(){ $(this).delay(delay).animate({opacity:1}, 200); delay += 100; }); }; });
这里可以看到jQuery Scroll Pagination的实现效果,
http://andersonferminiano.com/jqueryscrollpagination/
只要将界面不断往下滚动就可以看到。
var page = 1; $(function() { $(‘#getAjax‘).scrollPagination({ ‘contentPage‘: ‘__ACTION__‘, // the url you are fetching the results ‘contentData‘: { id : {$Think.request.id}, pic : {$Think.request.pic}, ps : {$ps}, pn : function(){return page} }, // these are the variables you can pass to the request, for example: children().size() to know which page you are ‘scrollTarget‘: $(window), // who gonna scroll? in this example, the full window ‘heightOffset‘: 10, // it gonna request when scroll is 10 pixels before the page ends ‘beforeLoad‘: function() { page = page + 1; }, ‘afterLoad‘: function(elementsLoaded) { // after loading content, you can use this function to animate your new elements $(elementsLoaded).fadeInWithDelay(); } }); // code for fade in element by element $.fn.fadeInWithDelay = function() { var delay = 0; return this.each(function() { $(this).delay(delay).animate({ opacity: 1 }, 200); delay += 100; }); }; });
使用scrollpagination实现页面底端自动加载无需翻页功能
标签:style content targe on() pos set ops target top
原文地址:http://www.cnblogs.com/xiaoqian1993/p/6144229.html