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

原创 2015年07月06日 17:24:35

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



移动网页端滑动到底部加载数据

$(window).bind("scroll", function () { var flag=document.getElementById('flag').value; if(ge...
  • xiangyihu
  • xiangyihu
  • 2016年12月21日 10:12
  • 1509

移动端滑动加载更多

1 、 滑动到底部再加载数据 $(function(){          $(window).scroll(function(){                    var scr...
  • u014611805
  • u014611805
  • 2016年01月04日 14:21
  • 1316

web移动端下拉加载数据简单实现

达人科技 2016-12-07 15:00 //下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动...
  • u011277123
  • u011277123
  • 2016年12月08日 08:44
  • 1534

移动端滚动加载数据

  • 2016年03月07日 17:17
  • 249KB
  • 下载

移动端无限滚动加载 js实现原理

由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态。因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿。传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击...
  • qq_17746623
  • qq_17746623
  • 2016年06月04日 10:05
  • 4150

Ajax动态滚动加载数据

看新浪微博,人人网都有这样的效果:滚动条滚动到最下面的时候,新的数据就被自动加载出来了,今天亲自尝试了一下这个效果的实现。 首先,准备一个分页的存储过程: CREATE PROCEDURE pr...
  • dannywj1371
  • dannywj1371
  • 2013年09月22日 15:50
  • 15476

手机端滑动分页 异步加载数据

  • 2015年05月20日 15:56
  • 13KB
  • 下载

手机网页端滑动到页面底部执行加载更多

var load_flag=false; $(function(){ $(window).scroll(function(){ if
  • u012493556
  • u012493556
  • 2016年09月12日 11:30
  • 5417

手机端滚动屏幕加载更多

别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this).scrollTop(); ...
  • lengyue1084
  • lengyue1084
  • 2016年08月19日 13:49
  • 3264

php+jquery+ajax滚动条滚动到底部自动加载,简单实现瀑布流

php+jquery+ajax滚动条滚动到底部自动加载,简单实现瀑布流
  • hai7425
  • hai7425
  • 2017年07月20日 09:14
  • 457
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js移动端滑动一个屏幕再加载新的数据以及ajax同步请求
举报原因:
原因补充:

(最多只允许输入30个字)