通过textarea实现页面分段加载

有一个同事想要实现页面分段加载,因为这样的话,可以快速显示第一屏的信息。唯一的不好,是对SEO不好。这个先不管了,写一下实现的步骤吧。

1、页面分块;

先把页面按照屏幕分成几块,每块均高于浏览器的高度,用<textarea>包住,第一块不要包,一般选择900px左右,这样大部分大屏幕都可以实现;

2、前台写法

<!–区块2–>

<textarea id=”hideArea0″>baba….</textarea>

3、调用的js;

var text;
		$(window).scroll(function(){
			if($(this).scrollTop()>20){
				text=$('#hideArea0').val();
				$('#hideArea0').after(text).detach();
			}
			if($(this).scrollTop()>600){
				text=$('#hideArea1').val();
				$('#hideArea1').after(text).detach();
			}
			if($(this).scrollTop()>1100){
				text=$('#hideArea2').val();
				$('#hideArea2').after(text).detach();
			}
			if($(this).scrollTop()>1600){
				text=$('#hideArea3').val();
				$('#hideArea3').after(text).detach();
			}
		});

这个写法就显示了滚动的幅度,出现什么内容。

4、案例的话,可以参考www.hiwegirl.com

Leave a Reply