延迟加载页面的例子

最新推荐文章于 2024-05-27 16:49:09 发布

阿宽Akwan

最新推荐文章于 2024-05-27 16:49:09 发布

阅读量920

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/xiaokuanblog/article/details/50359492

版权

一个可以延迟加载页面的例子，可用在页面展示内容较长时运用，当用户将页面滚动到底部指定像素以内时触发事件。

测试环境为chrome

<style type="text/css">
.elem{
	height:300px;
	width:100%;
	border: solid 1px red;
}
</style>
<script type="text/javascript">
	function regDelay(px){
		
		window.addEventListener("scroll", function(){   // 注册滚动事件
			var pageH = document.body.scrollHeight; // 整个页面的高度值
			var offH = window.pageYOffset;			// 页面超出顶部的值
			var innerH = window.innerHeight;		// 页面当前可视的高度值
			if(pageH < (offH + innerH + px)){		// 页面总高 < 超出+可视+变量容余值    即触发 
				alert("距离底部小于"+px+"px");
				// 向文档下方增加元素                // Your code in here
			}
		});
	}
</script>
</head>
<body οnlοad="regDelay(100)">
	<div class="elem">xiaokuan 1</div>
	<div class="elem">xiaokuan 2</div>
	<div class="elem">xiaokuan 3</div>
	<div class="elem">xiaokuan 4</div>
	<div class="elem">xiaokuan 5</div>
</body>

阿宽Akwan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
延迟加载页面的例子

一个可以延迟加载页面的例子，可用在页面展示内容较长时运用，当用户将页面滚动到底部指定像素以内时触发事件。测试环境为chrome.elem{ height:300px; width:100%; border: solid 1px red;} function regDelay(px){ window.addEventListener("scroll", fu
复制链接

扫一扫