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

去圣西罗-为尤文喝彩 2012-02-13 05:40:00 


|-------------------|

|                   |

|    主页面部分     |

|                   |

|___________________|



______________________          

--------  |

| DIV1 |  |

--------  |--------

          || DIV2 |

--------  |--------

| DIV3 |  |

--------  |--------

          || DIV4 |

          |--------


上面的图是页面布局。主页面部分高度大概有800px，DIV1，DIV2，DIV3，DIV4为4个空的DIV。
我想实现一个效果，当鼠标滚动页面底部是，按顺序 jquery.ajax 内容到上述四个DIV，且条件是当一个加载完后，再加载第二个DIV。

我尝试下面的方法，但是不起作用，求助大家，有什么方法可以实现我要的效果？（关键是jquery.ajax一个加载完后，再执行下一个加载）



$('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: toRequest[index]+'=1',//分别发送各自的数据到ajax.php，调回数据

	success: function(data){ 

		$("#"+toRequest[index]).html(data);//返回数据到各自的DIV里

		if (index+1<toRequest.length) {

			doRequest(index+1);

                        //ajax返回成功后，index+1，进入数组下一个

		}

	}

   }); 

});

});

});

...全文
555 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
longzl123 2014-09-23
  • 打赏
  • 举报
 回复
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>
longzl123 2014-09-15
  • 打赏
  • 举报
 回复
引用 1 楼 imtns59521 的回复:

$('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!="") {
            ...
        }
    }
   }); 
        }
    }
   }); 
});
});
});
非常感谢！！！
去圣西罗-为尤文喝彩 2012-02-23
  • 打赏
  • 举报
 回复
纠结完毕，感谢imtns59521，有灵感了。
去圣西罗-为尤文喝彩 2012-02-16
  • 打赏
  • 举报
 回复
@imtns59521, 感谢，印象里Lazyload只能加载图片，可以加载AJAX内容吗？
hellNo 2012-02-15
  • 打赏
  • 举报
 回复
楼主说的是当滚轮滚到DIV处时，然后加载，滚到哪个加载哪个是吗？？
这种功能你可以用Lazyload实现啊，效率很高的，而且功能实现更好！
现在什么拉手，58同城的团购网站都用的这个效果，就是当鼠标滚轮滚到当前DIV在加载图片或者DIV
给你参考看看！
cm_boy 2012-02-15
  • 打赏
  • 举报
 回复
async :false 同步
去圣西罗-为尤文喝彩 2012-02-14
  • 打赏
  • 举报
 回复
@imtns59521， 嘿，你好。你的方法一层嵌一层，也就是鼠标滚到下面后，4个DIV一个接一个全部都打开了。

我的需求有点区别，因为四个DIV位置有错落。所以：

1.当鼠标滚到第一个DIV的范围且没有进入第二个DIV的范围时，只加载第一个DIV。

______________________
-------- |
| DIV1 | | 鼠标位置


2.当鼠标滚到第一个DIV的范围且同时进入第二个DIV的范围时，按顺序加载第一个DIV，完成后再加载第二个DIV。

______________________
-------- |
| DIV1 | |
-------- |--------
鼠标位置 || DIV2 |


DIV3，DIV4 依次类推。


2楼的答案也一样，得考虑这个因素。谢谢。
KingViker 2012-02-14
  • 打赏
  • 举报
 回复
搂住可以将四个div的ajax函数设置为同步,也就是说第一个div的ajax返回了 才会执行第二个ajax async :false
hellNo 2012-02-14
  • 打赏
  • 举报
 回复 



$('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!="") {

            ...

        }

    }

   }); 

        }

    }

   }); 

});

});

});
jquery鼠标事件+动画效果
jQuery是-个快速、极简的JavaScript框架， 它是-个优秀的JavaScript代码库，设计的宗旨是“writeless，Do More”,即倡导写更少的代码，做更多的事情。它提供一种简便的JavaScript设计模式， 优化HTML文档操作、事件...
jQuery实现局部区域滚动条滚动到底部自动加载数据的问题总结与实现方法
1 需求背景 在我们做管理系统，需要从后台数据库取出数据显示到前台时，可能我们的做法就是将数据全部取出然后利用jQuery动态添加到表格当中，但是当我们取出的量非常大时问题就出现了，我们会发现页面加载的速度非常慢，这时我们就可利用分页或者这种监听滚动条来自动加载数据，这种技术也称为“懒加载” 2 实现过程中遇到的问题总结 （1）首先就是在滚动条滚动到底部之后，监听事件被多次触发。这个问题的解...
jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane和mCustomScrollbar。 关于 jScrollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。所以我选择了后者：mCustomScrollbar。下图是两者官方示例的简单对...
瀑布流代码PHP,jQuery向下滚动即时加载内容实现的瀑布流效果
下拉滚动条或鼠标滚轮滚动到页面底部时， 动态即时加载新内容。后台用 json 传输数据， 示例程序中只写了示例数组。数据也只设置了两个属性， 需根据实际应用改写。页面用了 ul li 做为容器， 每个 li 表示一列 PHP和Jquery和ajax实现下拉淡出瀑布流效果(无需插件)JS代码/*@版本日期: 版本日期: 2012年4月11日@著作权所有: 1024 intelligence ( ht...
jQuery自定义滚动条样式插件mCustomScrollbar
mCustomScrollbar  是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义网页的滚动条，并且垂直和水平两个方向的滚动条都可以定义，它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持，并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义滚动到的位置等。   实
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章