代码实例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 相关文章推荐
jquery json 实例代码
Dec 02 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
让angularjs支持浏览器自动填表
Nov 10 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Sanic框架路由用法实例分析
2018/07/16 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
巧克力蛋糕店创业计划书
2014/01/14 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
建国大业观后感
2015/06/01 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
python 中的jieba分词库
2021/11/23 Python