<!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. 虚拟机桥接模式联网方法，Xshell的连接与使用

    1.虚拟机的编辑中的虚拟网络编译器,新建一个VMnet0,选择桥接模式,选择上网时的网卡. 2.虚拟机 -> 设置 -> 网络适配器,选择启动时连接,桥接模式,复制物理网络连接状态. 3. ...

  2. JS基础整理面试题

    1.DOM和BOM的区别 DOM:document object model;文档对象模型,提供操作页面元素的方法和属性BOM:browser object model;浏览器对象模型,提供一些属性和 ...

  3. Hadoop 集群安装（从节点安装配置）

    1.Java环境配置 view plain copy sudo mv /tmp/java /opt/ jdk安装完配置环境变量,编辑/etc/profile: view plain copy sudo ...

  4. 算法与数据结构(六) 迪杰斯特拉算法的最短路径(Swift版)

    上篇博客我们详细的介绍了两种经典的最小生成树的算法,本篇博客我们就来详细的讲一下最短路径的经典算法----迪杰斯特拉算法.首先我们先聊一下什么是最短路径,这个还是比较好理解的.比如我要从北京到济南,而 ...

  5. jenkins：一键回滚站点集群

    最近在学习jenkins过程中整理了大量资料,都收录在<jenkins自动化工具使用教程>,但依然缺少一些具体实现细节. 这篇文章,介绍jenkins做集群回滚时的两个设计方案,让一键回滚 ...

  6. Java提高篇（三）：内部类和匿名内部类

    一,内部类 其实内部类是十分简单的,我们根据其字里行间的意义就可以知道内部类应该是一个类当中的一个类,相当于一个类进行了嵌套,就如同循环的嵌套一般. 内部类有一个特征:内部类当中可以调用外部类当中的属 ...

  7. 实战深度学习（下）OpenCV库

    在上一节中,我们讲到了OpenCV库的安装,现在我们来进行实战,看如何利用Python来调用OpenCV库. 一: 如果您的电脑是win10的系统,那么请您按下win键,再按下空格键,输入Python ...

  8. 【二代示波器教程】第15章 FreeRTOS操作系统版本二代示波器实现

    第15章     FreeRTOS操作系统版本二代示波器实现 本章教程为大家讲解FreeRTOS操作系统版本的二代示波器实现.主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任务 ...

  9. &和&&的共同点和区别、Java字符含义和Java创建对象的几种方式

    一.&和&&的共同点和区别 1.&和&&的联系(共同点): &和&&都可以用作逻辑与运算符,但是要看使用时的具体条件来决定. 操 ...

  10. 音视频编解码技术（二）：AAC 音频编码技术

    一.AAC编码概述 AAC是高级音频编码(Advanced Audio Coding)的缩写,出现于1997年,最初是基于MPEG-2的音频编码技术,目的是取代MP3格式.2000年,MPEG-4标准 ...