<!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. iOS浏览器 new Date() 返回 NaN

    问题 项目中某个地方用到了倒计时,因此打算通过 new Date() 函数实现.但在 iPhone 真机测试的时候,显示的结果不符合预期.通过调试发现 iOS 中 new Date('2017-01- ...

  2. 大数相加 Big Num

    代码: #include<stdio.h>#include<algorithm>#include<iostream>#include<string.h> ...

  3. MS SQL计算最大公约数和最小公倍数函数

    /*求两个数的最大公约数*/ CREATE FUNCTION f_GetGys ( @num1 BIGINT , @num2 BIGINT ) RETURNS BIGINT AS BEGIN DECL ...

  4. Java作业十（2017-11-8）

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

  5. 从零开始学深度学习mxnet教程：安装以及基本操作

    一.导言 本教程适合对人工智能有一定的了解的同学,特别是对实际使⽤深度学习感兴趣的⼤学⽣.⼯程师和研究⼈员.但本教程并不要求你有任何深度学习或者机器学习的背景知识,我们将从头开始解释每⼀个概念.虽然深 ...

  6. 浅谈Java中的锁：Synchronized、重入锁、读写锁

    Java开发必须要掌握的知识点就包括如何使用锁在多线程的环境下控制对资源的访问限制 ◆ Synchronized ◆ 首先我们来看一段简单的代码: 12345678910111213141516171 ...

  7. [Swift]LeetCode106. 从中序与后序遍历序列构造二叉树 | Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  8. python 模拟豆瓣登录（豆瓣6.0）

    最近在学习python爬虫,看到网上有很多关于模拟豆瓣登录的例子,随意找了一个试了下,发现不能运行,对比了一下代码和豆瓣网站,发现原来是豆瓣网站做了修改,增加了反爬措施. 首先看下要模拟登录的网站: ...

  9. 学习Python--函数进阶

    函数进阶 目标 函数参数和返回值的作用 函数的返回值 进阶 函数的参数 进阶 递归函数 01. 函数参数和返回值的作用 函数根据 有没有参数 以及 有没有返回值,可以 相互组合,一共有 4 种 组合形 ...

  10. vue + hbuilder 开发备忘录

    踩过的坑: axios 安卓低版本兼容性处理 阻止表单中,button默认事件,出现刷新问题. 设置滚动条的位置 vue 数据和对象数据变化 dom结构不变 android低版本 白屏问题 你是不是用 ...