代码实例ajax实现点击加载更多数据图片


Posted in Javascript onOctober 12, 2018

本文给大家介绍ajax如何实现点击加载更多数据图片(预加载)效果的,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

<!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:0;margin:0;}
      .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 = 0;
      var start = 0;
      var size = 2;
      $.ajax({
        url: "dataNews.json",
        type: "get",
        success: function(res){
          var str = "";
          for(var i = 0;i < 2;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);
            }
          });
        },300)
      }
    )
    </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条数据,当数据加载完了,就显示 “没有更多了”

Javascript 相关文章推荐
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
js格式化时间的简单实例
Nov 27 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
微信小程序实现上传图片功能
May 28 Javascript
vue项目环境变量配置的实现方法
Oct 12 #Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 #Javascript
原生JS实现轮播图效果
Oct 12 #Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 #Javascript
Element Input组件分析小结
Oct 11 #Javascript
element el-input directive数字进行控制
Oct 11 #Javascript
详解angular2.x创建项目入门指令
Oct 11 #Javascript
You might like
php学习之变量的使用
2011/05/29 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
json数据的列循环示例
2013/09/06 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
利用python修改json文件的value方法
2018/12/31 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Pandas分组与排序的实现
2019/07/23 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
Unix里面如何在后台运行程序
2016/10/14 面试题
文员个人求职自荐信
2013/09/21 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
webpack的移动端适配方案小结
2021/07/25 Javascript