代码实例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 相关文章推荐
JavaScript 格式字符串的应用
Mar 29 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
python的文件操作方法汇总
2017/11/10 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
pygame实现弹球游戏
2020/04/14 Python
python脚本和网页有何区别
2020/07/02 Python
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
请解释在new与override的区别
2012/10/29 面试题
4s店总经理岗位职责
2013/12/31 职场文书
高二政治教学反思
2014/02/01 职场文书
十佳护士先进事迹
2014/05/08 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
新员工考核评语
2014/12/31 职场文书
员工工作能力评语
2014/12/31 职场文书
保送生自荐信范文
2015/03/26 职场文书
婚宴父亲致辞
2015/07/27 职场文书