代码实例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 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
js闭包实例汇总
2014/11/09 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
angular.extend方法的具体使用
2017/09/14 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
vue底部加载更多的实例代码
2018/06/29 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
Python中的集合类型知识讲解
2015/08/19 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
python http基本验证方法
2018/12/26 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python实现复制文件到指定目录
2019/10/16 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
初任培训自我鉴定
2013/10/07 职场文书
物理教育专业毕业生推荐信
2013/11/03 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
社区服务标语
2014/07/01 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书