<!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>
<!--<li><img src="img/a1.jpg"></li>
<li><img src="img/a10.jpg"></li>
<li><img src="img/a11.jpg"></li>
<li><img src="img/a12.jpg"></li>-->
</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":"百度音乐"}
]

ajax点击加载更多图片的更多相关文章

  1. ajax点击加载更多数据图片（预加载）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  3. PHP+Ajax点击加载更多内容 －这个效果好，速度快，只能点击更多加载，不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  4. PHP+Ajax点击加载更多内容

    css样式: <style type="text/css"> #more{margin:10px auto;width: 560px; border: 1px soli ...

  5. Yii 1开发日记 -- Ajax实现点击加载下一页

    功能实现:先输出一页的内容,然后点击加载下一页,如图 1.控制器中 /** * 消费记录:列出用户购买章节的记录 */ public function actionMyPayHis() { //点击加 ...

  6. jQuery+php+Ajax文章列表点击加载更多功能

    jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...

  7. mui点击加载，下拉刷新，上下整合代码

    mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...

  8. Spring+Hibernate+struts2+JPA 注解+跨域//完成手机端点击加载更多 下拉加载更多

    一.使用IDEA新建一个maven项目(student) 1.1.0编写pom文件,添加项目所需要的包 <?xml version="1.0" encoding=" ...

  9. Ajax异步后台加载Html绑定不上事件

    因项目需要,需要实时从后台动态加载html,开发过程中,遇到事件绑定不上,后来百度一番,大概意思:ajax是异步加载的,页面一开始绑定事件的时候,后台数据还没有传过来,就绑定事件,这个时候找不到这个d ...

随机推荐

  1. 758B Blown Garland

    B. Blown Garland time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  2. git clone时出现:"diffie-hellman-group1-sha1 "

    解决办法1:在用户配置目录下添加一个ssh配置文件 vim /root/.ssh/config  内容如下: Host * KexAlgorithms +diffie-hellman-group1-s ...

  3. 数据存储（直接写入、NSUserDefaults、NSkeyedArchiver）

    ios中常用文件存取的方法有: 1.直接写文件的方式,可以存储的对象有NSString.NSArray.NSDictionary.NSData.NSNumber,数据全部存放在一个属性列表文件(*.p ...

  4. Python-多线程之消费者模式和GIL全局锁

    一.生产者和消费者模式 什么是生产者消费者模式 生产者消费者模式是通过一个容器来解决生产者和消费者的强耦合问题.生产者和消费者彼此之间不直接通讯,而通过阻塞队列来进行通讯, 所以生产者生产完数据之后不 ...

  5. python面向对象的三大特征

    1.封装: 封装就是对类和对象的成员访问进行限制,设定可以访问的方式和不可以访问的方式. 分类: 私有化的封装:当前类/对象种可以使用,类/对象外和子类/对象都不可以用 受保护的封装:当前类/对象和子 ...

  6. VS2010正则批量替换set_和get_

    批量替换set_: daohang.set_ChannelName(rowArray[0]["ChannelName"].ToString()); daohang.set_Chan ...

  7. 最详细的Axure动态面板使用教程

    1.打开[Axure]软件,在index文件上新建一个375*667大小的背景矩形并绘制页面. 具体如图所示. 2.在banner的位置上新建一个[动态面板],双击动态面板在其中新建state1.st ...

  8. pycharm和anaconda

    借鉴其他博文和亲自操作做一简要的总结: anaconda是python中一个管理包很好用的工具,可以轻松实现python中的各种包的管理.相信大家会有这样的体验,在pycharm中也是有自动搜索和下载 ...

  9. shell统计昨天的独立ip

    test.txt --| --| --| --| --| --| --| --| --| shell命令 yesterday=`date +%Y-%m-%d -d -1days` awk -v yes ...

  10. hook api实现

    https://www.cnblogs.com/findumars/p/8734116.html https://blog.csdn.net/lonelyrains/article/details/2 ...