为了实现滚动到页面底部自动加载图文列表效果，需要使用jQuery和ajax两个插件。下面是具体的实现步骤：
步骤一：提前准备好HTML结构
首先，需要将需要加载的内容放置在一个容器里，比如一个div，这个容器需要有一个id，比如id="content"。
步骤二：编写jquery代码
通过jquery的scroll事件可以捕获到页面滚动事件。当用户滚动滚动条时，判断当前滚动条的位置是否在页面底部，如果在页面底部，则触发ajax请求获取加载内容。
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
//触发ajax请求获取加载内容
}
});
步骤三：编写ajax代码
在滚动到页面底部时，通过ajax请求获取需要加载的内容。一般情况下需要传入一个参数，表示当前请求的页数或者需要加载的数量。
$.ajax({
url: "loadmore.php",
type: "POST",
data: { page: current_page },
dataType: "HTML",
timeout: 10000,
success: function(data) {
//将获取的内容插入到容器中
$("#content").append(data);
},
error: function(xhr, errorText, errorType) {
alert("加载失败，请重试！");
}
});
步骤四：编写后台代码
在这个例子中，为了方便，后台代码直接返回一个静态的HTML页面。具体的实现方式因语言而异。
下面是一个简单的PHP代码示例：
<?php
$page = $_POST["page"];
$start = $page * 10; //每页加载10个内容，这里需要根据实际情况调整
$html = "";
for ($i = $start; $i < $start + 10; $i++) {
$html .= "<div class='item'>内容" . $i . "</div>";
}
echo $html; //直接返回生成的HTML代码
?>
示例说明1
下面是一个简单的示例，实现了滚动到页面底部自动加载列表内容的效果。
<!DOCTYPE html>
<html>
<head>
<title>滚动到页面底部自动加载图文列表效果</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style>
.item { margin: 10px; padding: 8px; border: 1px solid #ddd; }
</style>
</head>
<body>
<div id="content"></div>
<script>
var current_page = 0; //当前页码
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
current_page++;
$.ajax({
url: "loadmore.php",
type: "POST",
data: { page: current_page },
dataType: "HTML",
timeout: 10000,
success: function(data) {
$("#content").append(data);
},
error: function(xhr, errorText, errorType) {
alert("加载失败，请重试！");
}
});
}
});
</script>
</body>
</html>
示例说明2
下面是一个稍微复杂一些的示例，实现了滚动到页面底部自动加载图片的效果。
<!DOCTYPE html>
<html>
<head>
<title>滚动到页面底部自动加载图片效果</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<style>
.item { margin: 10px; padding: 8px; border: 1px solid #ddd; }
img { max-width: 100%; }
</style>
</head>
<body>
<div id="content"></div>
<script>
var current_page = 0; //当前页码
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
current_page++;
$.ajax({
url: "loadmore2.php",
type: "POST",
data: { page: current_page },
dataType: "JSON",
timeout: 10000,
success: function(data) {
$.each(data, function(index, item) {
var img = $("<img>").attr("src", item.src);
var div = $("<div>").addClass("item").append(img);
$("#content").append(div);
});
},
error: function(xhr, errorText, errorType) {
alert("加载失败，请重试！");
}
});
}
});
</script>
</body>
</html>
后台代码（PHP）：
<?php
$page = $_POST["page"];
$start = $page * 10;
$data = array();
for ($i = $start; $i < $start + 10; $i++) {
$data[] = array("src" => "http://placehold.it/350x" . rand(200, 800) . "?text=Image" . $i);
}
echo json_encode($data);
?>
这个示例与前面的示例不同之处在于：
- 后台返回的数据是一个JSON对象，包含了多张图片的地址；
- 在前端中，通过jquery的each方法循环遍历返回的数据，生成img标签并插入到容器中。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载) - Python技术站
微信扫一扫 
支付宝扫一扫 