jquery鼠标滚动到页面底部，按顺序ajax页面

Question

$('div').each(function(){
if(!$(this).contents().length){//用each，判断是否DIV里已有内容？避免重复加载。
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height() + $('#footer').height()){
    //判断鼠标是否滚动到页面底部，这里还需要去除一个 div#footer 页脚的高度
    var toRequest=new Array("div1", "div2", "div3", "div4");//把4个DIV存为数组
    $.ajax({
        url: "ajax.php" , 
        dataType: "html",
    type: 'POST',
    data: $("#div1"),//分别发送各自的数据到ajax.php，调回数据
    success: function(data){ 
        $("#div1").html(data);//返回数据到各自的DIV里
        if (data!="") { //呵呵，你在success里在加载第二个DIV，写的笨了点，不过应该是这个意思
            $.ajax({
        url: "ajax.php" , 
        dataType: "html",
    type: 'POST',
    data: $("#div2"),//分别发送各自的数据到ajax.php，调回数据
    success: function(data){ 
        $("#div2").html(data);//返回数据到各自的DIV里
        if (data!="") {
            ...
        }
    }
   }); 
        }
    }
   }); 
});
});
});

Answer 1

搂住可以将四个div的ajax函数设置为同步,也就是说第一个div的ajax返回了 才会执行第二个ajax async :false

Answer 2

@imtns59521， 嘿，你好。你的方法一层嵌一层，也就是鼠标滚到下面后，4个DIV一个接一个全部都打开了。我的需求有点区别，因为四个DIV位置有错落。所以：1.当鼠标滚到第一个DIV的范围且没有进入第二个DIV的范围时，只加载第一个DIV。______________________          
--------  |
| DIV1 |  |  鼠标位置
2.当鼠标滚到第一个DIV的范围且同时进入第二个DIV的范围时，按顺序加载第一个DIV，完成后再加载第二个DIV。______________________          
--------  |
| DIV1 |  |
--------  |--------
鼠标位置  || DIV2 |
DIV3，DIV4 依次类推。
2楼的答案也一样，得考虑这个因素。谢谢。

Answer 3

楼主说的是当滚轮滚到DIV处时，然后加载，滚到哪个加载哪个是吗？？
这种功能你可以用Lazyload实现啊，效率很高的，而且功能实现更好！
现在什么拉手，58同城的团购网站都用的这个效果，就是当鼠标滚轮滚到当前DIV在加载图片或者DIV
给你参考看看！

Answer 4

@imtns59521, 感谢，印象里Lazyload只能加载图片，可以加载AJAX内容吗？

Answer 5

纠结完毕，感谢imtns59521，有灵感了。

Answer 6

url : path + "/pr/ajax.jsp",   这个给的是一个空的  为了能使ajax的url有地方去<script type="text/javascript">
$(document).ready(
function() {
var path = $("#path").val();
  $.ajax({
url : path + "/pr/ajax.jsp",
  dataType : "html",
  type : 'get',
  success : function(data) {
$("#div").html("<div class=\"m-cnt cnt2\" id=\"div1\"><img src=\"${pageContext.request.contextPath}/pr/img/images_1.png\" alt=\"以个人电脑为信息交互\" /></div>");
/*-----1-------------------------------------------*/
$.ajax({
url : path + "/pr/ajax.jsp",
dataType : "html",
type : 'get',
success : function(data) {
$("#div1").after("<div class=\"m-cnt cnt2\" id=\"div2\"><img src=\"${pageContext.request.contextPath}/pr/img/images_2.png\" alt=\"随时随地3C平台信息交流\" /></div>");
                                        /*-----2-------------------------------------------*/
 $.ajax({
url : path + "/pr/ajax.jsp",
dataType : "html",
type : 'get',
success : function(data) {
$("#div2").after("<div class=\"m-cnt cnt2\" id=\"div3\"><img src=\"${pageContext.request.contextPath}/pr/img/images_3.png\" alt=\"多名家庭成员同时使用同一台电脑\" /></div>");
                                       /*-----3-------------------------------------------*/
 $.ajax({
url : path + "/pr/ajax.jsp",
dataType : "html",
type : 'get',
success : function(data) {
$("#div3").after("<div class=\"m-cnt cnt2\" id=\"div4\"><img src=\"${pageContext.request.contextPath}/pr/img/images_4.png\" alt=\"手机、平板深度办公\" /></div>");
                                       
                                          /*-----4-------------------------------------------*/
    /*$.ajax({
url : path + "/pr/ajax.jsp",
dataType : "html",
type : 'get',
success : function(data) {
$("#div4").after("<div class=\"m-cnt cnt2\" id=\"div4\"><img src=\"${pageContext.request.contextPath}/pr/img/images_5.png\" alt=\"以个人电脑为信息交互\" /></div>");*/
                                         /*-----foot1----------------------------------------------*/
                                            $.ajax({
url : path + "/pr/ajax.jsp",
dataType : "html",
type : 'get',
success : function(data) {
  $("#foot1").html("<img src=\"${pageContext.request.contextPath}/pr/img/images_6.png\" />");
          /*-----foot2----------------------------------------------*/
                                                     $.ajax({
url : path + "/pr/ajax.jsp",
dataType : "html",
type : 'get',
success : function(data) {
  $("#foot2").html("<img src=\"${pageContext.request.contextPath}/pr/img/images_20.png\" alt=\"以个人电脑为信息交互\" />");
     }
     });
                                                      /*-----foot2----------------------------------------------*/         
}
});
                                            /*-----foot1----------------------------------------------*/              
/* }
});*/
        /*-----4-------------------------------------------*/   
}
});
        /*-----3-------------------------------------------*/
}
});
/*-----2-------------------------------------------*/
}
});
/*-----1-------------------------------------------*/ }
});
});</script>