代码实例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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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 字符串长度判断效率更高的方法
2014/03/02 PHP
php对称加密算法示例
2014/05/07 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
JQuery each打印JS对象的方法
2013/11/13 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python+Wordpress制作小说站
2017/04/14 Python
深入理解python中的select模块
2017/04/23 Python
python列表的增删改查实例代码
2018/01/30 Python
python爬取内容存入Excel实例
2019/02/20 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
携程英文网站:Trip.com
2017/02/07 全球购物
公务员职务工作的自我评价
2013/11/01 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
仓库文员岗位职责
2014/04/06 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
女生抽烟检讨书
2014/10/05 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
优秀教师单行材料
2014/12/16 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python