滚动条滚动到可视区域加载数据

最新推荐文章于 2024-05-11 13:34:12 发布

Panda_Joy

最新推荐文章于 2024-05-11 13:34:12 发布

阅读量5k

点赞数 1

分类专栏： js 文章标签：懒加载可视区域加载

本文链接：https://blog.csdn.net/yongxiaokang1/article/details/42913279

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

思路：

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;width:300px;background-color:Blue;">aaaaaaa</div> 
 <div  id="dvh" style="height:100px;width:200px;background-color:Green; " ></div>
<div  id="dvh2" >
            </div>
<div></div>
</body>
</html>

Panda_Joy

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
滚动条滚动到可视区域加载数据

实现功能：页面某版块，当滚动条滚动到该区域时加载数据，否则不加载，节省页面加载时间思路：1 判断是否进入可视区域2 加载数据，服务器端返回已经绑定好的repeater，相应样式加好3 注意一点，加一个开关，当ajax请求成功后，关闭，防止不停的无限的循环加载，优化，进入ajax就设置开关进入可视区域 $(function () { var is
复制链接

扫一扫