<!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. 2019PHP面试题最全面归纳总结

    1.请选择以下代码运行的结果: <?php if ('1e3' == '1000') echo 'LOL'; ?> A 无任何输出结果  B   LOL  C 不执行且报错 解析:1e3 ...

  2. java中int和integer

  3. java:找出占用CPU资源最多的那个线程

    linux环境下,当发现java进程占用CPU资源很高,且又要想更进一步查出哪一个java线程占用了CPU资源时,按照以下步骤进行查找: 1.先用top命令找出占用资源厉害的java进程id,如: 2 ...

  4. 业务配置开发平台qMISPlat 2.0 产品介绍

    qMISPlat是什么 qMISPlat(业务配置开发平台)是一套基于.net core 2.0.跨平台的,面向开发人员和具有一定技术水平的业务人员使用的业务配置开发平台.基于此平台您只需通过配置和少 ...

  5. [Swift]LeetCode9. 回文数 | Palindrome Number

    Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same back ...

  6. [Swift]LeetCode43. 字符串相乘 | Multiply Strings

    Given two non-negative integers num1 and num2 represented as strings, return the product of num1and  ...

  7. [Swift]LeetCode242. 有效的字母异位词 | Valid Anagram

    Given two strings s and t , write a function to determine if t is an anagram of s. Example 1: Input: ...

  8. [Swift]LeetCode319. 灯泡开关 | Bulb Switcher

    There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off every ...

  9. [Swift]LeetCode409. 最长回文串 | Longest Palindrome

    Given a string which consists of lowercase or uppercase letters, find the length of the longest pali ...

  10. [Swift]LeetCode518. 零钱兑换 II | Coin Change 2

    You are given coins of different denominations and a total amount of money. Write a function to comp ...