滑轮滚动到页面底部ajax加载数据配合jsonp实现探讨

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

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

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

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

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


复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<title></title>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<style type=”text/css”>

* { margin:0; padding:0;}

body { font-size:12px;}

p{ margin: 5px;}

.box{ padding: 10px;}

</style>

<!– 引入jQuery –>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>

$(function(){

$(window).bind(‘scroll’,function(){show()});

function show()

{

if($(window).scrollTop()+$(window).height()>=$(document).height())

{

ajaxRead();

}

}

function ajaxRead()

{

var html=””;

$.ajax({

type:’get’,

dataType:’jsonp’,

url:’http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?’,

beforeSend:function(){console.log(‘loading…’)},

success:function(data){

$.each(data.items,function(i,item){

html+='<div class=”box”>’;

html+='<h1>’+item.title+'</h1>’;

html+='<a hreft=”‘+item.link+'”><img src=”‘+item.media.m+'”/></a>’

html+='<div>’+item.tags+'</div>’;

html+='</div>’;

});

$(“#resText”).append($(html));

},

complete:function(){console.log(‘mission acomplete.’)}

});

}

})

</script>

</head>

<body>

<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>

<div id=”resText” >

</div>

</body>

</html>

拉到底部就是实现异步数据加载了,当然了,实际项目还要加上如果没数据了要怎么显示,怎么操作。这些加判断就行了。
您可能感兴趣的文章:

  • 基于JavaScript实现鼠标向下滑动加载div的代码
  • js实现滑动到页面底部自动加载更多功能
  • js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
  • 当滚动条滚动到页面底部自动加载增加内容的js代码
  • js实现滚动条滚动到页面底部继续加载
  • JavaScript实现页面滚动图片加载(仿lazyload效果)
  • 使用jQuery或者原生js实现鼠标滚动加载页面新数据
  • JS图片根据鼠标滚动延时加载的实例代码
  • 解析javascript瀑布流原理实现图片滚动加载
  • JS简单实现滑动加载数据的方法示例
张贴在3