代码实例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代码
Nov 09 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
小程序实现密码输入框
Nov 16 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实现递归抓取网页类实例
2015/04/03 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python线程join方法原理解析
2020/02/11 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
单位实习证明怎么写
2014/01/17 职场文书
电话客服工作职责
2014/07/27 职场文书
英文慰问信
2015/02/14 职场文书
生死抉择观后感
2015/06/09 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
Python上下文管理器Content Manager
2021/06/26 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers