代码实例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
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
node.js中的require使用详解
Dec 15 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
关于JS中prototype的理解
Sep 07 Javascript
jsTree使用记录实例
Dec 01 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 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
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP实现ASCII码与字符串相互转换的方法
2017/04/29 PHP
Dojo 学习要点
2010/09/03 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
微信小程序获取用户openid的实现
2018/12/24 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Django框架模板介绍
2019/01/15 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
联强国际笔试题面试题
2013/07/10 面试题
介绍一下代理模式(Proxy)
2014/10/17 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
便利店的创业计划书
2014/01/15 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
《少年王冕》教学反思
2014/04/11 职场文书
导游欢送词
2015/01/31 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL