代码实例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使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
Vue.js实现图片的随意拖动方法
Mar 08 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
Javascript中获取对象的原型对象的方法小结
2015/02/25 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
python 控制语句
2011/11/03 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
python交互式图形编程实例(二)
2017/11/17 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
在求职信中如何凸显个人优势
2013/10/30 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
电厂职工自我鉴定
2014/02/20 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
建筑安全标语
2014/06/07 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2015年电教工作总结
2015/05/26 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书