代码实例ajax实现点击加载更多数据图片
更新时间：2018年10月12日 08:42:20 投稿：laozhang
在本篇文章里我们给大家分享了关于ajax实现点击加载更多数据图片的相关代码知识点，有兴趣的朋友们参考下。
本文给大家介绍ajax如何实现点击加载更多数据图片（预加载）效果的，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax点击加载更多数据--博客园--勇淘未来</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
*{padding:0;margin:0;}
.box {margin: 100px auto;width: 550px;}
ul li {width:550px;list-style: none;}
ul li span{text-align:center;display:block;}
.clear {clear: both;}
.load {text-align: center;display: none;margin-top:50px;color:#ccc;}
.end{display:none;color:#ccc;}
</style>
</head>
<body>
<div class="box">
<ul></ul>
<div class="clear"></div>
<div class="load">加载中...</div>
<div class="more" style="text-align: center;margin-top:50px;">
<button class="btn">查看更多图片</button>
<div class="end">没有更多了</div>
</div>
</div>
<script>
var num = 0;
var start = 0;
var size = 2;
$.ajax({
url: "dataNews.json",
type: "get",
success: function(res){
var str = "";
for(var i = 0;i < 2;i++){
str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>";
}
$(".box ul").append(str);
},
error:function(){
console.log(errors);
}
})
$(".btn").click(function(){
$(".load").show();
setTimeout(function(){
$(".load").hide();
num++;
console.log(num);
start = num * size;
$.ajax({
url:"dataNews.json",
type:"get",
success:function(res){
var sum = res.length;
if(start + size > sum) {
size = sum - start;
$(".btn").css("display","none");
$(".end").css("display","block");
}
var str = "";
for(var i = start;i<(start + size);i++) {
str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>";
}
console.log(start + size);
$("ul").append(str);
}
});
},300)
}
)
</script>
</body>
</html>
本地测试dataNews.json文件:
[ {
"img":"img/sina.jpg","title":"百度音乐1"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐2"
}
, {
"img":"img/sina.jpg","title":"百度音乐3"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐4"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐5"
}
, {
"img":"img/sina.jpg","title":"百度音乐6"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐7"
}
, {
"img":"img/sina.jpg","title":"百度音乐8"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐9"
}
, {
"img":"img/sina.jpg","title":"百度音乐10"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐11"
}
, {
"img":"img/sina.jpg","title":"百度音乐12"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐13"
}
, {
"img":"img/sina.jpg","title":"百度音乐14"
}
, {
"img":"img/tengxu.jpg","title":"百度音乐15"
}
]
点击更多图片，加载2条数据，当数据加载完了，就显示 “没有更多了”
相关文章
以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些，即所谓make life easier. 笔者对某些陷阱会混杂一些评点。2008-05-05
这篇文章主要介绍了javascript禁用Tab键的脚本实例，很实用，大家参考使用吧2013-11-11
$.browser.msie 为空或不是对象问题的多种解决方法
因为使用了jquery判断ie，所以使用了$.browser.msie但是在jquery 1.9以后的版本中不再支持$.browser而使用$.browser来替代2017-03-03
一个简单的示例来演示如何使用自定义的eventUtil对象，javascript事件处理函数2011-08-08
在网页中，我们经常会看到各种轮播图的效果，它们到底是怎样实现的呢？本文将为大家详细介绍一下六种不同的轮播效果的实现，需要的可以参考一下2021-12-12
Javascript Function对象扩展之延时执行函数
这篇文章主要介绍 在js里面怎么延时执行一个函数?2010-07-07
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
这篇文章主要介绍了BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题,需要的朋友可以参考下2016-12-12
下面小编就为大家带来一篇打字效果动画的4种实现方法(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要为大家详细介绍了如何利用JavaScript语言实现判断两个日期不能跨年和跨月，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-04-04
这篇文章主要介绍了JavaScript实现精美个性导航栏筋斗云效果，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-10-10
最新评论