<!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. BZOJ2721或洛谷1445 [Violet]樱花

    BZOJ原题链接 洛谷原题链接 其实推导很简单,只不过我太菜了想不到...又双叒叕去看题解 简单写下推导过程. 原方程:\[\dfrac{1}{x} + \dfrac{1}{y} = \dfrac{1 ...

  2. sex在软件开发中的运用--SIX技术

    开篇:省略xxx字 keyword:sex . female, male .SIX ,sex integer extention technolgolsl 前言: 对于sex字段的研究,国内,国际尚为 ...

  3. UI设计教程：关于版式设计

    版式设计是视觉传达的重要手段之一,版式设计,即把有限的视觉元素在版面页进行有效的视觉组合,最优化地传达信息的同时,去影响受众,使受众产生视觉上的美感. 版式设计基本流程  在进行版式设计时,设计作品的 ...

  4. Java 线程池 Executor 框架

    在Java中,可以通过new Thread 的方法来创建一个新的线程执行任务,但是线程的创建是非常耗时的,而且创建出来的新的线程都各自运行.缺乏统一的管理,这样的后果是可能导致创建过多的线程从而过度消 ...

  5. Split Array Largest Sum LT410

    Given an array which consists of non-negative integers and an integer m, you can split the array int ...

  6. Windows使用SSH Secure Shell实现免密码登录CentOS

    笔记来自:http://blog.csdn.net/jiangshouzhuang/article/details/50683049 1.在Windows上生成密钥找到Secure Shell Cli ...

  7. django　静态文件

    django中的静态文件,如图片,css样式jquery等等 在url最下面加上 from django.conf.urls.static import staticfrom django.conf ...

  8. Visual Studio Plus 开发

    参考文档:Developing Visual Studio Extensions http://msdn.microsoft.com/en-us/library/dd885119(v=vs.120). ...

  9. kbmMW均衡负载与容灾(2)（转载红鱼儿）

    集中式均衡负载 为实现集中式均衡负载方案,需要实现两个不同的应用服务器,一个是只包含均衡负载组件再无其他内容的应用服务器,可称之为均衡负载应用服务器,下文简称LB Server,另外一个就是包含一个或 ...

  10. 2018.11.08 NOIP模拟 班车（倍增+dfs+bit）

    传送门 对于每个点离线处理出向上走2i2^i2i班车到的最上面的点. 然后每个询问(u,v)(u,v)(u,v)先把(u,v)(u,v)(u,v)倍增到刚好走不到lcalcalca的情况(有一个点如果 ...