文档章节

页面加载新的东西到页面底部

小老傅
 小老傅
发布于 2014/12/08 11:35
字数 230
阅读 87
收藏 8

js的代码部分:

<!-- lang: js -->
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		$("#send").click(function(){
			$("#resText").load("test.html #001");
			
		});
		
		

	$(window).scroll(function() {
			var scrollTop = $(this).scrollTop();
			console.info("scrollTop="+scrollTop);
			var scrollHeight = $(document).height();
			console.info("scrollHeight="+scrollHeight);
			var windowHeight = $(this).height();
			console.info("windowHeight="+windowHeight);
			if (scrollTop + windowHeight == scrollHeight) {
				alert("已经到底部了!");
				//此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
				$("<div>我是div的东西</div>").appendTo("body");
			}
		});

	});
</script>

下面的是页面的部分代码:

<!-- lang: html -->
<body>
<ul>

		<li>1232123132</li>
		<li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li><li>1232123132</li>
		<li>poppoweppkd</li>
		
		<li>poppoweppkd</li><li>poppoweppkd</li><li>poppoweppkd</li>
		<li>poppoweppkd</li><li>poppoweppkd</li><li>poppoweppkd</li>
</ul>

</body>

© 著作权归作者所有

共有 人打赏支持
小老傅
粉丝 7
博文 44
码字总数 35819
作品 0
海淀
程序员
私信 提问
加载 CSS 时不影响页面渲染

本文展示了一种技术,它能通过异步下载样式表,以阻止它们的下载阻塞页面的渲染,从而尽可能快的让访问者获取到信息内容。 警告! 我发这篇帖子全是好意,但是它并不负责让读它的人意识到下面...

oschina
2015/04/03
6.3K
13
如何测试Ajax动态分页列表的最大可翻页数?

原文作者:西安鲲之鹏 原文链接:http://www.site-digger.com/html/articles/20150718/94.html 现在使用Ajax技术的网站越来越多,一个常见的应用就是动态分页:当列表页面滚动底部时,下一页的...

西安鲲之鹏
2015/09/25
49
0
每页500条数据的渲染优化思路(1)

前言 每页返回500条的数据,前端一次渲染用户体验很不好,有哪些方式可以友好的解决这个问题。 分批加载 虽然后端返回了500条数据,但是考虑到以下两点我们并不需要一次性展示500条。 ui上并...

RobinsonZhang
2018/12/20
0
0
MooTools教程(6):操纵HTML DOM元素

我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过 MooTools 1.2,你可以添加新元素到一个HTML页面中,...

halfcoder
2010/12/25
0
2
yii2 如何在页面底部加载css和js

作者:白狼 出处:http://www.manks.top/article/yii2loadjscssin_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任...

白狼栈
2016/04/20
124
0

没有更多内容

加载失败,请刷新页面

加载更多

使用 HostAliases 向 Pod /etc/hosts 文件添加条目

默认 hosts 文件内容 通过 HostAliases 增加额外的条目 限制 为什么 Kubelet 管理 hosts文件? 当 DNS 配置以及其它选项不合理的时候,通过向 Pod 的 /etc/hosts 文件中添加条目,可以在 Po...

xiaomin0322
33分钟前
2
0
阿里高级技术专家:研发效能的追求永无止境

背景 大约在5年前,也就是2013年我刚加入阿里的时候,那个时候 DevOps 的风刚吹起来没多久,有家公司宣称能够一天发布几十上百次,这意味着相比传统软件公司几周一次的发布来说,他们响应商业...

阿里云官方博客
36分钟前
1
0
阻止冒泡事件

1、event.isImmediatePropagationStopped() $("#id").click( function(event) { event.isImmediatePropagationStopped()}); 2、event.stopPropagation $("#id").click( function(even......

yan_liu
42分钟前
2
0
shell实例100例《二》

11、题目要求 写一个脚本实现如下功能: 输入一个数字,然后运行对应的一个命令。 显示命令如下: *cmd meau** 1 - date 2 - ls 3 - who 4 - pwd 当输入1时,会运行date, 输入2时运行ls, 以此...

寰宇01
46分钟前
0
0
CentOS开机自启SVN

安装好 svn 服务后,默认是没有随系统启动自动启动的, CentOS 7 的 /etc/rc.d/rc.local 是没有执行权限的, 系统建议创建 systemd service 启动服务 于是查看 systemd 里 svn 的配置文件 /l...

临江仙卜算子
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部