<!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. AngularJS 高级程序设计

    1.5.4 安装Web服务器 原来的: connect.static("../angularjs"); 报错.可以修改为: var connect = require('conne ...

  2. Mac下配置域名和网站测试环境

    一.在 /etc/hosts   下配置相关域名 1, control+space  打开spotlight, 搜索“terminal” 2, 打开Terminal 3, 在terminal界面中输入 ...

  3. HDU 6126.Give out candies 最小割

    Give out candies Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Other ...

  4. [SoapUI] 在SoapUI中通过Groovy脚本执行window命令杀掉进程

    //杀Excel进程 String line def p = "taskkill /F /IM EXCEL.exe".execute() def bri = new Buffere ...

  5. [RF] 安装好Robot Framework之后怎样让启动的界面后面不带命令行窗口，且图片以机器人显示

    安装好Robot Framework之后,通过 C:\Python27\Scripts\ride.py 启动时会带上一个命令行窗口: 怎样让启动的界面后面不带这个命令行窗口,且图片以机器人显示? 方法 ...

  6. hbase 单机版安装

    1.安装jdk参见http://www.cnblogs.com/lvlv/p/4337863.html 安装路径:/usr/java/jdk1.7.0_79 2.下载hbase   http://mi ...

  7. centos安装tomcat7.0.70

    抄自:https://www.cnblogs.com/www1707/p/6592504.html apache-tomcat-7.0.70jdk-7u67-linux-x64 下载tomcathtt ...

  8. Python 解释器介绍

    举个栗子: -c cmd用法 python -c ' import os ; print ("is ok ") ' 或者(注意引号形式) python -c "impor ...

  9. 20155312 2006-2007-2 《Java程序设计》第三周学习总结

    20155312 2006-2007-2 <Java程序设计>第三周学习总结 课堂内容总结 yyp复制上一行代码 5不是false statistics.sh换成.bat就可以在windo ...

  10. ManageEngine OMP帮助台委派