代码实例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中实现命名空间
Nov 23 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
VuePress 快速踩坑小结
Feb 14 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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生成随机数或者字符串的代码
2008/09/05 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
three.js欧拉角和四元数的使用方法
2020/07/26 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
python简单获取数组元素个数的方法
2015/07/13 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
研发工程师岗位职责
2014/04/28 职场文书
坎儿井导游词
2015/02/09 职场文书
用python自动生成日历
2021/04/24 Python
利用Python+OpenCV三步去除水印
2021/05/28 Python
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Java中API的使用方法详情
2022/04/06 Java/Android