原生DOM滑动加载实现

1.需求页面请求先加载可视区域的数据,滚动后再加载请求

参考一些其他文章,大体的实现思路是,获取可视区域的高度,当元素距离页面顶部的距离减去滚动的距离小于可视区域的高度的值得时候,发送请求。
实现:

var layzLoad = function (opt) {
	var option = {
		flag:true,
        id:'',
        url:'',
        success:function () {}
     }
     option = $.extend(true,option,opt);
     var load = function () {
        var clinetHeight = window.innerHeight;
        var loadDiv =$('#'+option.id).offset().top - window.scrollY - 10;
        if($('#'+option.id).length>0 && loadDiv <= clinetHeight && option.flag){
                option.flag = false;
                $.ajax({
                    url: option.url,
                    success: function (r) {
                        option.success(r);
                    },
                    error:function (err) {
                        option.flag = true;
                    }
                });
            }
        }

        load();
        $(window).scroll(function () {
            load();
        })
    }
	调用layzLoad()方法传相关的参数就可以了。但是在调试中发现了一个问题,当元素没有设置高度或者高度为auto时,第一次加载的时候$('#'+option.id).offset()获取的是不准确的。
	兼容ie时,使用 window.pageYOffset 代替 window.scrollY。但是旧版本IE(<9)两个属性都不支持。
	暂时使用这种方法实现,还没有想到其他的更好的办法。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值