html创建后自动调用js,网页拉到底部自动加载怎么实现的？jquery无限加载技术分享...

你也许常常逛各种网页会发现，有的网页需要手动翻页，有的网站却会自动帮你加载，体验上，后者高效不少，只要你内容多，即可无限加载，那么，作为一个程序员，你一定会好奇这种技术是怎么样实现的？

别急，今天就让小超越工作室为你慢慢讲解一下。这里涉及到几个知识点，可别忘了拿好小本本记下来哦。

如果用原生javascript太过于复杂，我们今天就用jquery来实现吧！

用到的jquery技术方法

$.ajax() //异步加载接口数据

$(document).scroll(function(){}) //监控拉下滚动条事件

$(document).scrollTop() //获取滚动条的高度

$(window).height() //获取可见的窗口高度

$(‘#id’).append(html) //在元素后面添加html代码

无限下拉实现思路

1、首先，我们需要实现无限拉下加载数据，那么我们就一定要有一个接口返回要加载的数据，所以这个要提前做好。

2、获取需要下拉加载元素的高度、

3、获取可见窗口的高度

4、获取当前滚动条的高度

5、根据可见窗口高度+当前滚动条高度，如果大于或等于元素的高度，那么就可以判断用户已经下拉到底部了，这时，就要利用ajax异步请求接口来获取数据，并且在当前元素后面添加上相应的内容即可。

6、但是因为，接口请求数据有延时，我们还需要设计一个动态加载的开关。如果加载成功才把开关打开，避免重复请求数据，造成无法预计的后果。

无限下拉加载数据演示代码实例

小超越工作室一向都是崇尚简洁，直接上代码，如果需要直接复粘贴即可实现你要的效果，不过，你还是要根据你的html结构来修改一下。

html部分

js代码部分

page = 1;

isloding = false

$(document).on('scroll', function () {

var listheight = $("#goodslist").height();

var listscrollheight = $(document).scrollTop()

var winheight = $(window).height();

if (listscrollheight + winheight >= listheight && isloding == false) {

console.log("到底啦！")

isloding = true

lod()

}

})

function lod() {

var url='/index.php/index/so_api/?title='+key+'&page='+page

$.ajax({

url: url, success: function (res) {

console.log(res)

html=res.data;

page=res.min_id;

$('#goodslist').append(html)

isloding = false

}

});

}

好了,网页拉到底部自动加载怎么实现的？jquery无限加载技术分享，就到这里完了，如果你还是不懂得，就来问小超越吧。不过，问问题前，最好先红包开路哦！