infinite scroll
类似一些网站， 例如京东搜索商品， 浏览到最后一页，自动加载新的商品。
一则可以加快首页响应速度， 二则减轻带宽和服务器荷载。 这么多商品信息一次性返回给客户端也是不可行的。
An infinite scrolling plugin for jQuery
https://github.com/pklauzinski/jscroll
http://jscroll.com/
jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as lazy loading, endless scrolling, autopager, endless pages, etc.; is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.
An example of infinite scrolling is your Facebook "News Feed" page. You may notice that when you scroll to the bottom of this page, new content will often load automatically, or you will be given a link to "Older Posts" which will load more content when clicked.
demo： http://jscroll.com/
Recliner.js
https://github.com/sourcey/recliner
Recliner is a super lightweight (1KB) jQuery plugin for lazy loading images, iframes and other dynamic (AJAX) content. Being lazy never felt so good, just hook it up, and start sippin' those margaritas!
The script was born out of necessity when one of our clients came to us with massive scroll lag on one of their media heavy mobile news sites. It turned out that
lazy-load-xtwas the culprit, so naturally we tested the other lazy load scripts out there but none of them met our simple criteria:
- Lightweight
- Sets stateful CSS classes on elements
- Ability to override event callbacks for custom behaviour
- Can load any dynamic content (images, iframes, AJAX)
- Mobile friendly
- Printer friendly
Recliner is currently used on some very high traffic sites, so it's well tested and production ready.
demo：
https://sourcey.com/recliner/
代码示例：
其它：
https://github.com/metafizzy/infinite-scroll
20 jQuery Lazy Load Plugins for Improve Page Load Time
http://smashfreakz.com/2016/06/jquery-lazy-load-plugins/
如何实现infinite scroll？
https://www.quora.com/How-do-websites-only-load-part-of-the-page-and-then-load-more-as-you-scroll-down
检测位置， 发起ajax。
<script type="text/javascript">
$(document).ready(function(){
var ajax_once = false;
function last_msg_funtion()
{
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="Page on localhost">');
$.post("welcome/index/get/"+ID,
function(data){
if (data != "") {
$(".message_box:last").after(data);
}
$('div#last_msg_loader').empty();
}).done(function(data) {
/* use the data */
ajax_once = false;
});
};
$(window).scroll(function(){
if (ajax_once)
return;
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
});
});
</script>