<!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. Bandwagon的配置记录(一) —— kexue上网

    写在前面 这是kexue上网的一种方法. 看文章前,先拉最底下,看一遍“写在最后”. 租个服务器 我租了个洛杉矶的服务器,系统是ubuntu16.04 x86_64 进入KiwiVM Control ...

  2. victory-native的使用

    Victory用于构建交互数据可视化的可组合React组件的生态系统 想写又不想写,真尴尬...

  3. Three.js学习笔记05

    场景相关函数和属性 下面的代码中应用到了所有以上的函数及属性: <!DOCTYPE html> <html lang="en"> <head> ...

  4. ArrayList源码理解

    ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ArrayList不是线程安全的,只能用在单线程环境下,多线程环境下可以考虑用Col ...

  5. 【RL-TCPnet网络教程】第23章 RL-TCPnet之地址解析协议ARP

    第23章      RL-TCPnet之地址解析协议ARP 本章节为大家讲解ARP(Address Resolution Protocol,地址解析协议),通过前面章节对TCP和UDP的学习,需要大家 ...

  6. [Swift]LeetCode4. 两个排序数组的中位数 | Median of Two Sorted Arrays

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  7. [Swift]LeetCode720. 词典中最长的单词 | Longest Word in Dictionary

    Given a list of strings words representing an English Dictionary, find the longest word in words tha ...

  8. 使用 SetColorFilter 神奇地改变图片的颜色

    关键代码如下: colors.xml文件中定义一个颜色值: <color name="permission_dialog_img_color">#000000</ ...

  9. .net core使用RPC方式进行高效的HTTP服务访问

    传统的HTTP接口调用是一件比较繁琐的事情,特别是在Post数据的时候:不仅要拼访问的URL还是把数据序列化成流的方式给Request进行提交,获取Respons后还要对流进行解码.在实际应用虽然可以 ...

  10. 补习系列(10)-springboot 之配置读取

    目录 简介 一.配置样例 二.如何注入配置 1. 缺省配置文件 2. 使用注解 3. 启动参数 还有.. 三.如何读取配置 @Value 注解 Environment 接口 @Configuratio ...