用Jquery写出下拉到底加载JS内容
时间: 2024-03-01 16:50:06 浏览: 22
下拉到底加载 JS 内容的代码示例如下:
```javascript
$(document).ready(function() {
var page = 1;
var isLoading = false;
// 监听滚动事件
$(window).scroll(function() {
// 判断是否滚动到底部
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// 如果正在加载,直接返回
if (isLoading) {
return;
}
isLoading = true;
// 加载数据
$.ajax({
type: 'GET',
url: 'your_api_url?page=' + page,
success: function(data) {
if (data) {
// 在页面末尾添加数据
$('#your_content_container').append(data);
page++;
}
},
complete: function() {
isLoading = false;
}
});
}
});
});
```
这段代码监听了页面的滚动事件,当滚动到底部时,发送 Ajax 请求加载数据,并将加载的数据添加到页面的末尾。`isLoading` 变量用于防止在加载数据过程中多次触发加载事件。你需要将 `your_api_url` 和 `your_content_container` 替换为你自己的 API 地址和内容容器选择器。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)