代码实例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获取GridView选择的行内容
Apr 14 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 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的网址
2006/11/25 PHP
模拟flock实现文件锁定
2007/02/14 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php文件缓存方法总结
2016/03/16 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python检测生僻字的实现方法
2016/10/23 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
matplotlib实现区域颜色填充
2019/03/18 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python绘制组合图的示例
2020/09/18 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
数学系毕业生求职信
2014/05/29 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书