JavaScript - implement page lazy loading via mouse scrolling-CSDN博客

本文链接：https://blog.csdn.net/QUANPAILIE/article/details/46343355

This is a sample to do page lazy loading while mouse scrolling.

One next page button was given for non-scrolling event trigger situation.

<!DOCTYPE html>
<html>
<header>
<title>
This is a auto expanding page
</title>

<style>
	.reset{
			margin: 0 0 0 0;
			width: 100%;
			height: auto;
			border: 1px solid gray;
			overflow-y: auto;
			overflow-x: hidden;
		}
	div[id=frameDiv] div {
			display: block;
			margin: 0 0 0 0;
			width: 100%;
			height: 20px;
			border: 1px solid black;
			background-color: pink;
		}
</style>
<script language="JavaScript" src="jquery.min.js"></script>
<script>
	Gloable_ArticleHeight = 20;
	function initState(){
		var wheight = Math.floor(window.innerHeight/Gloable_ArticleHeight);
		aGener(wheight);
	}
	
	function aGener(wheight){
		for (var i = 0; i < wheight; i++){
			$("#frameDiv").append("<div>Article "+ i + "</div>");
		}
	}

var fScroll = "true";
var sCount = 0;

$(document).ready(function(){
    $(this).scroll(function(){
    		if(fScroll == "true"){
     			aGener(Math.floor(window.innerHeight/Gloable_ArticleHeight));
     			fScroll = "false";
     			sCount++;
     		}else if($(this).scrollTop()/sCount >= window.innerHeight){
     			console.log($(this).scrollTop() + " " +sCount + " " + $(this).scrollTop()/sCount);
     			aGener(Math.floor(window.innerHeight/Gloable_ArticleHeight));
     			sCount++;
     		}
    });
});
</script>
</header>
<body οnlοad="initState()" οnresize="initState()">
<div id="frameDiv" class="reset">
</div>
<div id="footerDiv" style="display: block; position: static; width: 100%; height: 30px; top:100px; background-color: rgb(203,210,200); z-index:2;">
	<input type="button" value="Next Page" size="30" style="height: 25px;"/>	
</div>
</body>
</html>

Testing Result: