jQuery实现页面滚动时动态加载内容的方法
本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。具体分析如下:
很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到。
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var
loading = false ;
$(window).scroll( function (){
if ((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
if (loading ==
false ){
loading =
true ;
$( '#loadingbar' ).CSS( "display" , "block" );
$.get( "load.php?start=" +$( '#loaded_max' ).val(),
function (loaded){
$( 'body' ).append(loaded);
$( '#loaded_max' ).val(parseInt($( '#loaded_max' ).val())+50);
$( '#loadingbar' ).css( "display" , "none" );
loading =
false ;
});
}
}
});
$(document).ready( function () {
$( '#loaded_max' ).val(50);
});
|
希望本文所述对大家的jQuery程序设计有所帮助。