<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>ajax点击加载更多数据--博客园--勇淘未来</title>

         <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

         <style>

             *{padding:;margin:;}

             .box {margin: 100px auto;width: 550px;}

             ul li {width:550px;list-style: none;}

             ul li span{text-align:center;display:block;}

             .clear {clear: both;}

             .load {text-align: center;display: none;margin-top:50px;color:#ccc;}

             .end{display:none;color:#ccc;}

         </style>

     </head>

     <body>

         <div class="box">

             <ul></ul>

             <div class="clear"></div>

             <div class="load">加载中...</div>

             <div class="more" style="text-align: center;margin-top:50px;">

                 <button class="btn">查看更多图片</button>

                 <div class="end">没有更多了</div>

             </div>

         </div>

         <script>

             var num = ;

             var start = ;

             var size = ;

             $.ajax({

                 url: "dataNews.json",

                 type: "get",

                 success: function(res){

                     var str = "";

                     for(var i = ;i < ;i++){

                         str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>";

                     }

                     $(".box ul").append(str);

                 },

                 error:function(){

                     console.log(errors);

                 }

             })

             $(".btn").click(function(){

                 $(".load").show();

                 setTimeout(function(){

                     $(".load").hide();

                     num++;

                     console.log(num);

                     start = num * size;

                     $.ajax({

                         url:"dataNews.json",

                         type:"get",

                         success:function(res){

                             var sum = res.length;

                             if(start + size > sum) {

                                 size = sum - start;

                                 $(".btn").css("display","none");

                                 $(".end").css("display","block");

                             }

                             var str = "";

                             for(var i = start;i<(start + size);i++) {

                                 str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>";

                             }

                             console.log(start + size);

                             $("ul").append(str);

                         }

                     });

                 },)

             }

         )

         </script>

 </body>

 </html>

本地测试dataNews.json文件:

[ {

	"img":"img/sina.jpg","title":"百度音乐1"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐2"

}

, {

	"img":"img/sina.jpg","title":"百度音乐3"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐4"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐5"

}

, {

	"img":"img/sina.jpg","title":"百度音乐6"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐7"

}

, {

	"img":"img/sina.jpg","title":"百度音乐8"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐9"

}

, {

	"img":"img/sina.jpg","title":"百度音乐10"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐11"

}

, {

	"img":"img/sina.jpg","title":"百度音乐12"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐13"

}

, {

	"img":"img/sina.jpg","title":"百度音乐14"

}

, {

	"img":"img/tengxu.jpg","title":"百度音乐15"

}

]

点击更多图片，加载2条数据，当数据加载完了，就显示 “没有更多了”

欢迎大家留言评论

ajax点击加载更多数据图片（预加载）的更多相关文章

  1. jQuery 显示加载更多(节流) 实现预加载

    (function () { var showMoreNChildren = function ($children, n) { //显示某jquery元素下的前n个隐藏的子元素 var $hidde ...

  2. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  3. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  4. iOS:详解MJRefresh刷新加载更多数据的第三方库

    原文链接:http://www.ios122.com/2015/08/mjrefresh/ 简介 MJRefresh这个第三方库是李明杰老师的杰作,这个框架帮助我们程序员减轻了超级多的麻烦,节约了开发 ...

  5. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

  6. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  7. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. 图片预加载和AJAX的图片预加载

    利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. for循环语句/命名函数

    for(1.表达式1;2.表达式2;3.表达式3){ 4.循环体语句; } 先执行1,在执行2表达式,如果2的表达式为false的话直接退出循环, 如果2的表达式结果为true,执行4,执行3,执行2 ...

  2. 操作XML

    别人已经写过很好的XML辅助类,可以直接引用后使用: 我这里自己写一个xml的操作类,目前能实现的是对一个不含集合的类可以操作,含集合的类无法将集合里的数据读取出来, 首先定义一个XML特性,用于区分 ...

  3. Java作业八（2017-10-30）

    public class TAutoPerson { public static void main(String args[]) { new Person(); new Person(); new ...

  4. [Swift]LeetCode66. 加一 | Plus One

    Given a non-empty array of digits representing a non-negative integer, plus one to the integer. The ...

  5. 解决同一页面中两个iframe互相调用jquery,js函数

    这一个月又没更新博客,唉,懒癌又犯了,今天解决了一个问题,关于两个iframe互相调用jquery函数方法 a.html中有两个iframe,如下: <iframe width="10 ...

  6. GraphQL-前端开发的利剑与桥梁

    GraphQL-前端开发的利剑与桥梁 基本概念 GraphQL GraphQL 是一种用于 API 的查询语言,由Facebook开发和开源,是使用基于类型系统来执行查询的服务端运行时(类型系统由你的 ...

  7. python网络-计算机网络基础(23)

    一.网络简介 网络是由节点和连线构成,表示诸多对象及其相互联系. 一个人玩: 两个人玩: 多个人玩: 说明 网络就是一种辅助双方或者多方能够连接在一起的工具 如果没有网络可想单机的世界是多么的孤单 使 ...

  8. 【Redis篇】Redis持久化方式AOF和RDB

    一.前述 持久化概念:将数据从掉电易失的内存存放到能够永久存储的设备上. Redis持久化方式RDB(Redis DB)   hdfs:    fsimageAOF(AppendOnlyFile)   ...

  9. Hbase篇--HBase中一对多和多对多的表设计

    一.前述 今天分享一篇关于HBase的一对多和多对多的案例的分析. 二.具体案例 案例一.多对多    人员-角色   人员有多个角色  角色优先级   角色有多个人员   人员 删除添加角色   角 ...

  10. redis 系列7 数据结构之跳跃表

    一.概述 跳跃表(skiplist)是一种有序数据结构,它通过在每个节点中维持多个指向其他节点的指针,从而达到快速访问节点的目的.在大部分情况下,跳跃表的效率可以和平衡树(关系型数据库的索引就是平衡树 ...