原生DOM滑动加载实现

最新推荐文章于 2022-06-08 15:38:22 发布

一只竹蜻蜓

最新推荐文章于 2022-06-08 15:38:22 发布

阅读量207

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_45779056/article/details/115668627

版权

本文介绍如何在网页开发中实现根据用户滚动位置动态加载内容，尤其针对高度未定义或为'auto'的元素。通过扩展layzLoad函数，处理IE兼容性和初次加载的offset问题，并提供一种适用于不同浏览器的方法。

摘要由CSDN通过智能技术生成

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）两个属性都不支持。
	暂时使用这种方法实现，还没有想到其他的更好的办法。