ajax点击加载更多图片

最新推荐文章于 2021-10-14 21:10:29 发布

AsaZyf

最新推荐文章于 2021-10-14 21:10:29 发布

阅读量670

点赞数

文章标签：加载图片 ajax

本文链接：https://blog.csdn.net/AsaZyf/article/details/80403512

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
margin: 100px auto;
width: 590px;
}

ul {
height: 165px;
}

ul li {
margin-right: 10px;
margin-top: 25px;
text-align: center;
width: 122px;
height: 121px;
list-style: none;
float: left;
}
.clear{
clear: both;
}
.load{
text-align: center;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>

<body>
<div class="box">
<ul>

</ul>
<div class="clear"></div>
<div class="load">
<img src="img/ajax-loader.gif" />
</div>
<div class="more" style="text-align: center;">
<button class="btn" style="margin-top: 40px;">查看更多图片</button>
</div>
</div>
<script>
var num = 0
var start = 0
var size = 4

$.ajax({
url: "data/new4.json",
type: "get",
success: function(res) {
var str = ""
for(var i = 0; i < 4; i++) {
str += "<li><img src=" + res[i].img + ">" + res[i].title + "</li>"
}
$(".box ul").append(str)
}
})

$(".btn").click(function() {
$(".load").show()
setTimeout(function() {
$(".load").hide()
num++
start = num * size
$.ajax({
url: "data/new4.json",
type: "get",
success: function(res) {
var sum = res.length
if(start + size > sum) {
size = sum - start
$(".btn").html("没有更多了")
}
var str = ""
for(var i = start; i < (start + size); i++) {
str += "<li><img src=" + res[i].img + ">" + res[i].title + "</li>"
}
console.log(start + size)
$("ul").append(str)
}
})
}, 1000)

})
</script>
</body>

</html>

json：

[
{"img":"img/a1.jpg","title":"百度音乐"},
{"img":"img/a10.jpg","title":"百度音乐"},
{"img":"img/a11.jpg","title":"百度音乐"},
{"img":"img/a12.jpg","title":"百度音乐"},
{"img":"img/a13.jpg","title":"百度音乐"},
{"img":"img/a14.jpg","title":"百度音乐"},
{"img":"img/a15.jpg","title":"百度音乐"},
{"img":"img/a16.jpg","title":"百度音乐"},
{"img":"img/a2.jpg","title":"百度音乐"},
{"img":"img/a3.jpg","title":"百度音乐"},
{"img":"img/a4.jpg","title":"百度音乐"},
{"img":"img/a5.jpg","title":"百度音乐"},
{"img":"img/a6.jpg","title":"百度音乐"},
{"img":"img/a7.jpg","title":"百度音乐"},
{"img":"img/a8.jpg","title":"百度音乐"},
{"img":"img/a9.jpg","title":"百度音乐"}
]