滑轮滚动到页面底部ajax加载数据的实例

滚动下拉到页面底部加载数据是很多瀑布流网站的做法，那来看看配合jsonp是如何实现的吧，小菜总结记录之用，高手勿喷。

当然本例子采用的是jquery库，后期会做成原生js。

本例的数据调用的是锋利的jquery一书提供的一段json。

首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的height，jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height()；

再给window绑定scroll事件。所以整个页面demo可以这样做:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title></title>
 5  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <style type="text/css">
 7 * { margin:0; padding:0;}
 8 body { font-size:12px;}
 9 p{ margin: 5px;}
10 .box{ padding: 10px;}
11 </style>
12  <!--   引入jQuery -->
13 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
14 <script type="text/javascript">
15 $(function(){
16     $(window).bind('scroll',function(){show()});
17
18     function show()
19     {
20
21         if($(window).scrollTop()+$(window).height()>=$(document).height())
22         {
23             ajaxRead();
24         }
25     }
26
27     function ajaxRead()
28     {
29
30         var html="";
31         $.ajax({
32               type:'get',
33               dataType:'jsonp',
34               url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',
35               beforeSend:function(){console.log('loading...')},
36               success:function(data){
37                             $.each(data.items,function(i,item){
38
39                                    html+='<div class="box">';
40                                    html+='<h1>'+item.title+'</h1>';
41                                    html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'
42                                    html+='<div>'+item.tags+'</div>';
43                                    html+='</div>';
44
45                             });
46                             $("#resText").append($(html));
47               },
48               complete:function(){console.log('mission acomplete.')}
49
50         });
51     }
52 })
53 </script>
54 </head>
55 <body>
56 <p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p><p>往下拉</p>
57  <div id="resText" >
58
59  </div>
60
61 </body>
62 </html>

拉到底部就是实现异步数据加载了，当然了，实际项目还要加上如果没数据了要怎么显示，怎么操作。这些加判断就行了。

转载于:https://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html

滑轮滚动到页面底部ajax加载数据的实例相关推荐

js 下拉底部加载|滑轮滚动到页面底部ajax加载数据的实例
转载链接:http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配 ...
C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
滚动到页面底部自动加载内容
上网时经常会看到许多酷炫的网页,其中给我印象较深刻的是鼠标滚动到页面底部时会自动加载内容,一直都很好奇是怎么样做到的,于是自己也尝试着写了一下. 先上个完整代码吧: <!DOCTYPE html ...
一起学爬虫——如何爬取通过ajax加载数据的网站
目前很多网站都使用ajax技术动态加载数据,和常规的网站不一样,数据时动态加载的,如果我们使用常规的方法爬取网页,得到的只是一堆html代码,没有任何的数据. 请看下面的代码: url = 'http ...
datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入  搜索  新增  编辑  删除职业姓名性别爱好 //点击查找 $(" ...
.ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).ready(function () { $(" ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
ajax显示加载动画,jQuery Ajax 加载数据时异步显示加载动画
jQuery Ajax 加载数据时异步显示加载动画 ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码在js脚本文件中首先把这个图片动画隐藏代码如下 $(document).re ...
web页面到ajax,页面使用ajax加载页面后如果运行其中的js，webpack如何多页面展示...
1.页面使用了sui-mobile这个框架,其中的页面路由部分会使用ajax加载页面.虽然每次都能加载到下一个页面,但是会出现加载到的页面中的js不去执行的情况. 2.页面打包使用了webpack,现 ...

滑轮滚动到页面底部ajax加载数据的实例

滑轮滚动到页面底部ajax加载数据的实例相关推荐

最新文章

热门文章