<!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. shell脚本${}、##和%%使用范例

    file=/dir1/dir2/dir3/my.file.txt 可以用${ }分别替换得到不同的值: ${file#*/}:删掉第一个 / 及其左边的字符串:dir1/dir2/dir3/my.fi ...

  2. 网卡驱动如何设置组播MAC地址

    参考资料: https://blog.csdn.net/abccheng/article/details/50465268 将网卡加入到组播组中.

  3. EL（表达式语言）

    EL表达式的主要作用 1)获取数据.EL使得获取JavaBean中的数据变得非常简单,也可以替换JSP页面中的脚本元素,从各种类型的web域中获取数据. 2)执行运算.利用EL表达式可以在JSP页面中 ...

  4. [Robot Framework] Robot Framework用Execute Javascript对XPath表示的元素执行Click操作

    Execute Javascript document.evaluate("//a[contains(@href,'createBook')]", document, null, ...

  5. Python编程笔记（第一篇）Python基础语法

    一.python介绍 1.编程语言排行榜 TIOBE榜 TIOBE编程语言排行榜是编程语言流行趋势的一个指标,每月更新,这份排行榜排名基于互联网有经验的程序员.课程和第三方厂商的数量. 2.pytho ...

  6. mysql cmd 无法登录

    第一次折腾mysql诉苦记 版本注明: mysql 5.7.21 本地部署mysql,配置完成后(配置没有问题) cmd命令连接mysql: mysql -uroot -p 提示: ERROR 104 ...

  7. mybatis学习一 环境搭建

    第一步导入Jar包 第二步配置sqlMapConfig.xml文件,xml文件放在src下面 <?xml version="1.0" encoding="UTF-8 ...

  8. 2018.11.06 NOIP训练 简单的计数问题（计数dp）

    传送门 直接f[i][j]f[i][j]f[i][j]表示已经到第iii个位置已经找到jjj个的方案数. 简单转移一下就行了. 代码

  9. vue.js实战(文摘)

    ---------------第1篇 基础篇 第1章 初始vue.js 第2章 数据绑定和第一个vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置命令 第6章 ...

  10. kafka 支持发布订阅

    概述 一般消息队列的是实现是支持两种模式的,即点对点,还有一种是topic发布订阅者模式,比如ACTIVEMQ.KAFKA也支持这两种模式,但是实现的原理不一样. KAFKA 的消息被读取后,并不是马 ...