关闭

js移动端滑动一个屏幕再加载新的数据以及ajax同步请求

标签: javascriptjsjquery性能
2273人阅读 评论(0) 收藏 举报
分类:

js移动端滑动一个屏幕再加载新的数据

现在我们有一个美女图片的列表页,在这个列表页中有上千个美女的小图片。如果一次加载全部的图片那么需要一些时间,用户体验不是很好,因此采用边滑动边加载,那么现在的问题是滑动到什么程度再加载图片呢?
第一种方案,滑动到底部再加载新的图片(每次加载18个图片)
$(function(){ 
    $(window).scroll(
    		   
    	function(){ 
           if ((document.documentElement.scrollHeight) == (document.documentElement.scrollTop | document.body.scrollTop) + document.documentElement.clientHeight){
                 alert("加载新的图片");
                 }
          });
   });
滑动到屏幕底部再加载新的图片,有一个问题是:当滑动到底部再加载图片需要等会新的图片数据才返回,体验也不是很好。

第二种方案是:滑动一个屏幕再加载新的图片

<ul  id="beautityList" >  
   <li >  
     <a >  
       <img _src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=473474780,244297065&fm=58" alt="" class="pic">  
    </a>  
    <p class="fan">范冰冰 <span class="age">1981</span></p>  
    <p >fanbingbing<span></span><em class="bingbing"></em></p>  
   </li>  
   <li >  
     <a >  
       <img _src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=754874951,2913294364&fm=58" alt="" class="pic">  
    </a>  
    <p class="fan">李冰冰 <span class="age">1973</span></p>  
    <p >libingbing<span></span><em class="bingbing"></em></p>  
  </li>  
              
   ....  
</ul>  

   通过调试,手机不管是android还是ios,每滚动一次,document.documentElement.scrollHeight、document.documentElement.scrollTop或document.body.scrollTop、document.documentElement.clientHeight,这三个值有一个变化规律那就是 document.body.scrollTop 或document.documentElement.scrollTop以100递增增加,即每滚动一次, document.body.scrollTop 或document.documentElement.scrollTop的值加100, document.body.scrollTop 或document.documentElement.scrollTop的初始值是0
因为不同的手机屏幕大小不同,所以手机滚动一个屏幕不同的手机 document.body.scrollTop 或document.documentElement.scrollTop的值是不同的,因此不能 document.body.scrollTop 或document.documentElement.scrollTop等于某个值(该值是100的倍数)来判断已经滚动了一个屏幕了。
   用$(window).height()来获得手机的屏幕高度大小,因为不能保证每个手机的屏幕高度是100的倍数所以对手机的屏幕进行四舍五入是之成为100的倍数
   具体代码如下
  
$(function(){ 
    $(window).scroll(
    		   
    	function(){ 
        var heightwindow = $(window).height();
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var heightwindowsishewuru = Math.round(heightwindow/100) * 100;

       if((document.body.scrollTop % heightwindowsishewuru  == 0  && document.body.scrollTop != 0 && document.documentElement.scrollTop == 0)  || 

(document.body.scrollTop == 0 && document.documentElement.scrollTop % heightwindowsishewuru == 0  && document.documentElement.scrollTop != 0)){  //当往下滑一个屏幕的时

候再加载
   alert("加载新的图片");
}

          });
   });

  

ajax同步请求

  在这个有上千个美女图片的列表页中有排序的需求,如根据年龄进行排序,如果采用ajax异步请求就不能保证列表页的数据按年龄进行排序。因为如果采用ajax进行异步请求,就不能保证第一次请求的数据比第二次请求的数据先到。要想列表页的数据按年龄进行排序,就必须采用ajax同步,即ajax请求的数据必须返回后才可以进行下一次的ajax请求,根据实验得出只要在有网的情况的ajax不会出现请求失败的情况
  
var _url = "https://www.baidu.com/";
$.ajax({
		type: "POST",
                data:{"k":"hello"},
                url: _url,
		cache:false,
		async:false,    //true:异步,false:同步。
		success: function(data){
                   alert("ajax请求成功");
                  },
               error: function(){
                   alert("ajax请求失败");
                }
             })



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:181670次
    • 积分:2163
    • 等级:
    • 排名:第18703名
    • 原创:44篇
    • 转载:62篇
    • 译文:0篇
    • 评论:5条
    文章分类