zoukankan      html  css  js  c++  java
  • 滚动条滚动到可视区域加载数据

    实现功能:页面某版块,当滚动条滚动到该区域时加载数据,否则不加载,节省页面加载时间

    思路:

    1 判断是否进入可视区域

    2 加载数据,服务器端返回已经绑定好的repeater,相应样式加好

    3 注意一点,加一个开关,当ajax请求成功后,关闭,防止不停的无限的循环加载,优化,进入ajax就设置开关

    <html>
    <head>
    <title>进入可视区域</title>
     <script type="text/javascript" src="/scripts/jquery/jquery1.4.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var isload = true;
            $(window).scroll(function () {
                var fold = $(window).height() + $(window).scrollTop();
                if (fold > $("#dvh").offset().top && isload) {
                    $.ajax({
                        type: "GET",
                        url: '/test.aspx?r=' + Math.random(),
                        cache: false,
                        dataType: "html",
     beforeSend: function(XMLHttpRequest){
                               isload = false;
                            }, success: function (data) {
    if (data != "") { $('#dvh2').html(data); $("#dv").css("display", "block"); var likeErr = $('#getInErr').val(); if (likeErr == "false") { $('#dvh2').val = $('#getIn').val(); } } },
      error: function(){
                            isload = false;
                            } }) } }); } )
    </script> </head> <body> <div id="dvlong" style="height:1600px;300px;background-color:Blue;">aaaaaaa</div> <div id="dvh" style="height:100px;200px;background-color:Green; " ></div> <div id="dvh2" > </div> <div></div> </body> </html>
  • 相关阅读:
    BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
    Xiaocms 去版权
    nodejs学习8:windows连接mongodb出现的错误解决办法
    gulp运行步骤
    电脑日常技巧:没有语言栏,怎么办???
    jquery中使用each遍历。
    一、Java基礎(二)
    一、Java基础(一)
    《JAVA编程思想》第四版 PDF
    TCP、UDP详解与抓包工具使用
  • 原文地址:https://www.cnblogs.com/judy0605/p/2573274.html
Copyright © 2011-2022 走看看