利用<textarea>封装html网页代码，实现移动端首屏之外的按需渲染html（加载相应图片、视频）功能。
为了使得浏览者觉得网页打开很快，同时节省带宽，先只加载首屏内容，首屏取折中高度900px，往下其余内容封装在对应的<textarea>中，当浏览者在首屏滑动了屏幕，则调用事先封装在<textarea>里面的网页代码。实现按需渲染html，然而下面这段代码不能达到相应效果，不知道哪里出了问题。请教大神解答！<!doctype html><html><head><meta charset="utf-8"><title>按需加载渲染html</title></head><body> <div id="first" style="height:200px; background-color:red"></div> <textarea id="aaa"> <div id="second" style="height:200px; background-color:green"></div> </textarea> <textarea id="bbb"> <div id="third" style="height:200px; background-color:purple"></div> </textarea><script type="text/javascript"> var text; $(window).scroll(function(){ if($(this).scrollTop()>20){ text=$("#aaa").val(); $("#first").after(text).detach(); } if($(this).scrollTop()>400){ text=$('#aaa').val(); $('#bbb').after(text).detach(); } });</script></body></html>
感谢回答，你说的第二句确实是对的，再结合下面这篇文章，已经解决了这个问题。
http://www.360doc.com/content/14/0718/18/21412_395331800.shtml