<!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. Android.StructureOfAndroidSourceCodeRootTree

    Refference 1. How to understand the directory structure of android root tree? http://stackoverflow.c ...

  2. BZOJ1801或洛谷2051 [AHOI2009]中国象棋

    BZOJ原题链接 洛谷原题链接 这题挺难想状态的,刚看题感觉是状压,但数据\(100\)显然不可能. 注意到每行每列只能放\(0\sim 2\)个棋子,所以我们可以将这个写入状态. 设\(f[i][j ...

  3. MySQL 索引 INDEX

    索引用于快速找出在某列中有特定值的行. 不使用索引,MySQL必须从第一条记录开始读完整个表,直到找到相关的行,表越大,查询数据所花费的时间就越多,如果表中查询的列有一个索引,MySQL能够快速到达一 ...

  4. rm命令删除文件时排除特定文件

    删除文件时排除特定文件 www.python  tab.com/html/2013/linuxkaiyuan_0205/214.html 删除当前目录下所有 *.txt文件,除了test.txt 1 ...

  5. HTML5中的Web Notification桌面通知(右下角提示)

    html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...

  6. 惊讶于word 的流畅

    word 这个产品 的操作流畅 比自家产品OneNote 比wps 强的太多 用后的体验是,再用其他的编译文字的软件,便感觉操作不畅,不流利,不舒服.(使人曾经沧海难为水,自然而然的不用别人的产品,w ...

  7. Quartz（强大的定时器）

    1.关于Quartz的配置文件说明 # # Quartz会优先读取项目下我们自定义这个quartz.properties配置文件 否则会去读取quartzjar包下org.quatrz包# 下面的那个 ...

  8. 690. Employee Importance

    好几种写法,这里贴几个出来 第一种:暴力解法,除去递归栈,空间复杂度O(1).时间复杂度略高 /* // Employee info class Employee { public: // It's ...

  9. 2018.10.30 bzoj4942: [Noi2017]整数（线段树压位）

    传送门 直接把修改的数拆成logloglog个二进制位一个一个修改是会TLETLETLE的. 因此我们把303030个二进制位压成一位储存在线段树里面. 然后维护区间中最靠左二进制位不为0/1的下标. ...

  10. 2018.10.30 NOIP模拟 字胡串（单调栈+容斥）

    传送门 对于每个点,用单调栈求出它左右第一个比他大的位置. 然后对每个点O(logai)O(log_{a_i})O(logai​​)求出第一个拥有跟它不同二进制位的位置. 然后容斥一下就行了. 代码