【www.bbyears.com--Access】
当手机网页过长时,可以将内容分块,用Ajax加载。
主要思路如下:将需要加载的页面存放在一个新的页面中,主要代码:
header("Access-Control-Allow-Origin: *"); header("Content-type: text/html; charset=utf-8"); echo ""; echo里面是需要加载的html。
然后在js初始化里面使用scroll函数时刻监听滚动条,判断滚动条距离顶部的距离,然后根据需要在适当的位置使用Ajax get数据,主要代码如下:
if(h>appheight){//滚动条的高度大于appbox的高度。调用Ajax获取下面的数据 //ajax get方法 if(flag==0){ $.get('http://192.168.1.138/zmitphone/AjaxweChatBox.php', function (response) { // $(".weChatBox").remove(".loading"); $(".loadingwechat").hide(); $(".weChatBox").append(response) console.log("success"); flag=1; }) } else{ // console.log(flag); if(h>appheight+weChatheight){ if(flag==1){ $.get('http://192.168.1.138/zmitphone/ajaxWebBox.php', function (response) { $(".loadingweb").hide(); $(".webBox").append(response) console.log("success"); flag=2; }) } else{ console.log(flag); if(h>appheight+weChatheight+webheight){ if(flag==2){ $.get('http://192.168.1.138/zmitphone/ajaxSoftwareBox.php', function (response) { $(".loadingsoft").hide(); $(".softwareBox").append(response) console.log("success"); flag=3; }) } else{ console.log(flag); if(h>appheight+weChatheight+webheight+softwareheight){ if(flag==3){ $.get('http://192.168.1.138/zmitphone/ajaxSeoBox.php', function (response) { $(".loadingseo").hide(); $(".seoBox").append(response) console.log("success"); flag=4; }) } else{ console.log("全部加载完毕"); } } } } } } }
因为滚动条一直在监听,但是到了指定位置只要加载一次数据就够了,这里可以设置一个flag,根据flag的值判断就可以了。如果想要添加一个加载提示,可以在需要添加的位置里面写一些提示文字,加载成功后,隐藏这个div就可以了。