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

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请求失败");                }             })