随滚动条位置动态加载页面图片
2011-06-29 09:03
204 查看
一、展示页面
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!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>
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<style type="text/css">
img{border:0;}
a{cursor:pointer;color:#014ccc;text-decoration:underline;}
a:hover{text-decoration:none;}
.clear{clear:both;height:0px;overflow:hidden;}
.img_list{margin:0 auto;}
.img_list li{list-style:none}
.img_list .items{width:300px;margin:0 auto;}
.img_list .item{float:left;margin-bottom:5px;font-size:14px;}
.img_list .item .order{display:inline-block;*display:inline;*zoom:1;width:28px;color:#f30;}
.img_list .item .i_thumb{width:300px;height:280px;}
.img_list .item .i_title{width:100%;height:20px;}
.showmore{height:35px;background:#f8f8f8;border-bottom:1px solid #cccccc;cursor:pointer;tetx-align:center;margin-bottom:25px;}
.showmore .handle{display:block;height:35px;text-align:center;color:#909090;font-size:14px;text-decoration:none;line-height:35px;}
.showmore .handle:hover{text-decoration:none;background:#e6e6e6;}
</style>
</head>
<body>
<center>
<h1>
图片动态加载示例</h1>
</center>
<div class="img_list" id="img_list">
<div class="items" id="items">
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片一">
<img src="/Themes/Default/Images/images_test/1.jpg" alt="图片一" /></a></li>
<li class="i_title"><span class="order">1</span><a href="#"
target="_blank" title="图片一">图片一</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片二">
<img src="/Themes/Default/Images/images_test/2.jpg" alt="图片二" /></a></li>
<li class="i_title"><span class="order">2</span><a href="#"
target="_blank" title="图片二">图片二</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片三">
<img src="/Themes/Default/Images/images_test/3.jpg" alt="图片三" /></a></li>
<li class="i_title"><span class="order">3</span><a href="#"
target="_blank" title="图片三">图片三</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片四">
<img src="/Themes/Default/Images/images_test/4.jpg" alt="图片四" /></a></li>
<li class="i_title"><span class="order">4</span><a href="#"
target="_blank" title="图片四">图片四</a></li>
</ul>
<div class="clear">
</div>
</div>
<div class="showmore" id="showmore">
<a class="handle" href="javascript:show()">显示更多结果</a></div>
</div>
<script type="text/javascript">
var timespan = 5 //检测间隔时间（秒）
var iHeight = 0;
var iTop = 0;
var clientHeight = 0;
var iIntervalId = null;
var pageNo = 1; // 当前页数，默认设为第 1 页
var pageSize = 4; // 每页显示的数量
getPageHeight();
// 添加定时检测事件，每2秒检测一次
iIntervalId = setInterval("_onScroll();", timespan * 1000);
// 取得当前页面显示所占用的高度
function getPageHeight() {
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
iHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
// 调用ajax取服务端数据
function show() {
pageNo++;
$.ajax({
url: '/Test/Img?p=' + pageNo + '&r=' + Math.random(),
type: 'GET',
dataType: 'text',
timeout: 4000,
beforeSend: showLoadingImg,
error: showFailure,
success: showResponse
});
}
function showLoadingImg() {
$('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>');
}
function showFailure() {
$('#showmore').html('<font color=red> 获取查询数据出错 </font>');
}
// 根据ajax取出来的json数据转换成html
function showResponse(responseData) {
var returnjson = eval("(" + responseData + ")");
var itemsSize = returnjson.items.length;
var nextpagehtml = '';
var pageOffset = (pageNo - 1) * pageSize + 1;
for (i = 0; i < itemsSize; i++) {
nextpagehtml += '<ul class="item">';
nextpagehtml += '<li class="i_thumb"><a href="#" target="_blank" title="' + returnjson.items[i].name + '"><img src="/Themes/Default/Images/' + returnjson.items[i].pic + '" alt="' + returnjson.items[i].name + '" /></a></li>';
nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="#" target="_blank" title="' + returnjson.items[i].name + '">' + returnjson.items[i].name + '</a></li>';
nextpagehtml += '</ul>';
}
nextpagehtml += '<div class="clear"></div>';
$(nextpagehtml).appendTo($("#items"));
// 当前页码数小于3页时继续显示更多提示框
if (pageNo < 3) {
$('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
} else {
clearInterval(iIntervalId);
$('#showmore').hide();
}
}
// 判断滚动条是否到达底部
function reachBottom() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
if ((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) {
return true;
} else {
return false;
}
}
// 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时
function _onScroll() {
iTop = document.documentElement.scrollTop + document.body.scrollTop;
getPageHeight();
if (((iTop + clientHeight) > parseInt(iHeight * 0.99)) || reachBottom()) {
if (pageNo >= 3) {
clearInterval(iIntervalId);
$('#showmore').hide();
return;
}
show();
}
};
</script>
</body>
</html>
二、Ajax后端页面
public ActionResult Img(string p)
{
p = DataTypeHelper.GetString(p, "2");
if (p.Equals("2"))
{
return Content("{\"items\":[{\"name\":\"图片名\",\"pic\":\"images_test/5.jpg\"},{\"name\":\"图片名\",\"pic\":\"images_test/6.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/7.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/8.jpg\"}]}");
}
else if (p.Equals("3"))
{
return Content("{\"items\":[{\"name\":\"图片名\",\"pic\":\"images_test/9.jpg\"},{\"name\":\"图片名\",\"pic\":\"images_test/10.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/11.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/12.jpg\"}]}");
}
return Content("");
}
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!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>
<script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<style type="text/css">
img{border:0;}
a{cursor:pointer;color:#014ccc;text-decoration:underline;}
a:hover{text-decoration:none;}
.clear{clear:both;height:0px;overflow:hidden;}
.img_list{margin:0 auto;}
.img_list li{list-style:none}
.img_list .items{width:300px;margin:0 auto;}
.img_list .item{float:left;margin-bottom:5px;font-size:14px;}
.img_list .item .order{display:inline-block;*display:inline;*zoom:1;width:28px;color:#f30;}
.img_list .item .i_thumb{width:300px;height:280px;}
.img_list .item .i_title{width:100%;height:20px;}
.showmore{height:35px;background:#f8f8f8;border-bottom:1px solid #cccccc;cursor:pointer;tetx-align:center;margin-bottom:25px;}
.showmore .handle{display:block;height:35px;text-align:center;color:#909090;font-size:14px;text-decoration:none;line-height:35px;}
.showmore .handle:hover{text-decoration:none;background:#e6e6e6;}
</style>
</head>
<body>
<center>
<h1>
图片动态加载示例</h1>
</center>
<div class="img_list" id="img_list">
<div class="items" id="items">
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片一">
<img src="/Themes/Default/Images/images_test/1.jpg" alt="图片一" /></a></li>
<li class="i_title"><span class="order">1</span><a href="#"
target="_blank" title="图片一">图片一</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片二">
<img src="/Themes/Default/Images/images_test/2.jpg" alt="图片二" /></a></li>
<li class="i_title"><span class="order">2</span><a href="#"
target="_blank" title="图片二">图片二</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片三">
<img src="/Themes/Default/Images/images_test/3.jpg" alt="图片三" /></a></li>
<li class="i_title"><span class="order">3</span><a href="#"
target="_blank" title="图片三">图片三</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a href="#" target="_blank" title="图片四">
<img src="/Themes/Default/Images/images_test/4.jpg" alt="图片四" /></a></li>
<li class="i_title"><span class="order">4</span><a href="#"
target="_blank" title="图片四">图片四</a></li>
</ul>
<div class="clear">
</div>
</div>
<div class="showmore" id="showmore">
<a class="handle" href="javascript:show()">显示更多结果</a></div>
</div>
<script type="text/javascript">
var timespan = 5 //检测间隔时间（秒）
var iHeight = 0;
var iTop = 0;
var clientHeight = 0;
var iIntervalId = null;
var pageNo = 1; // 当前页数，默认设为第 1 页
var pageSize = 4; // 每页显示的数量
getPageHeight();
// 添加定时检测事件，每2秒检测一次
iIntervalId = setInterval("_onScroll();", timespan * 1000);
// 取得当前页面显示所占用的高度
function getPageHeight() {
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
iHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
// 调用ajax取服务端数据
function show() {
pageNo++;
$.ajax({
url: '/Test/Img?p=' + pageNo + '&r=' + Math.random(),
type: 'GET',
dataType: 'text',
timeout: 4000,
beforeSend: showLoadingImg,
error: showFailure,
success: showResponse
});
}
function showLoadingImg() {
$('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />显示更多结果</a>');
}
function showFailure() {
$('#showmore').html('<font color=red> 获取查询数据出错 </font>');
}
// 根据ajax取出来的json数据转换成html
function showResponse(responseData) {
var returnjson = eval("(" + responseData + ")");
var itemsSize = returnjson.items.length;
var nextpagehtml = '';
var pageOffset = (pageNo - 1) * pageSize + 1;
for (i = 0; i < itemsSize; i++) {
nextpagehtml += '<ul class="item">';
nextpagehtml += '<li class="i_thumb"><a href="#" target="_blank" title="' + returnjson.items[i].name + '"><img src="/Themes/Default/Images/' + returnjson.items[i].pic + '" alt="' + returnjson.items[i].name + '" /></a></li>';
nextpagehtml += '<li class="i_title"><span class="order">' + (pageOffset + i) + '</span><a href="#" target="_blank" title="' + returnjson.items[i].name + '">' + returnjson.items[i].name + '</a></li>';
nextpagehtml += '</ul>';
}
nextpagehtml += '<div class="clear"></div>';
$(nextpagehtml).appendTo($("#items"));
// 当前页码数小于3页时继续显示更多提示框
if (pageNo < 3) {
$('#showmore').html('<a class="handle" href="javascript:show()">显示更多结果</a>');
} else {
clearInterval(iIntervalId);
$('#showmore').hide();
}
}
// 判断滚动条是否到达底部
function reachBottom() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
if ((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) {
return true;
} else {
return false;
}
}
// 检测事件，检测滚动条是否接近或到达页面的底部区域，0.99是为了更接近底部时
function _onScroll() {
iTop = document.documentElement.scrollTop + document.body.scrollTop;
getPageHeight();
if (((iTop + clientHeight) > parseInt(iHeight * 0.99)) || reachBottom()) {
if (pageNo >= 3) {
clearInterval(iIntervalId);
$('#showmore').hide();
return;
}
show();
}
};
</script>
</body>
</html>
二、Ajax后端页面
public ActionResult Img(string p)
{
p = DataTypeHelper.GetString(p, "2");
if (p.Equals("2"))
{
return Content("{\"items\":[{\"name\":\"图片名\",\"pic\":\"images_test/5.jpg\"},{\"name\":\"图片名\",\"pic\":\"images_test/6.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/7.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/8.jpg\"}]}");
}
else if (p.Equals("3"))
{
return Content("{\"items\":[{\"name\":\"图片名\",\"pic\":\"images_test/9.jpg\"},{\"name\":\"图片名\",\"pic\":\"images_test/10.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/11.jpg\"}, {\"name\":\"图片名\",\"pic\":\"images_test/12.jpg\"}]}");
}
return Content("");
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- JQuery页面随滚动条动态加载效果实现
- jQuery页面滚动图片等元素动态加载实现
- jQuery实现页面滚动图片等元素动态加载（按需加载的实例）
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
- jQuery--页面图片等元素滚动动态加载技术
- 根据滚动条位置动态加载内容。。
- jQuery页面滚动图片等元素动态加载实现
- 页面滚动图片等元素动态加载插件jquery.scrollLoading.js
- jquery 随滚动条动态图片加载（模拟淘宝商城图片加载）
- 页面加载完毕后滚动条自动滚动一定位置
- JQuery监听页面滚动总结和浏览器动态显示加载图片
- JQuery页面随滚动条动态加载效果实现
- jQuery页面滚动图片等元素动态加载实现
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- 滚屏到相应位置才加载图片-优化页面访问速度
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- JQuery页面随滚动条动态加载效果实现
- 页面随滚动条滚动而动态加载内容的效果