30 Jun 2010
一知半解 – 分析淘宝商城首页的 lazy load 功能
2010年6月30日 12:35 pm - 代码浅谈 - 生活琐碎 - javascript - lazy load
15 feet
最近趁部门搬至淘宝办公。
研究了一下之前就开始注意的 ：商城首页 的lazy load 实现(也可以说是：伪异步加载)。
首先解释一下商城 的 lazy load 是怎么一回事。
我们打开商城后发现，当你拖动滚动条往下，第二屏以下的东西才慢慢加载出来。
这样做能在初次打开的时候http 请求将大幅度减少，并且页面加载速度也提高不少。
上面说的 伪异步加载 是咋一看的推测，感觉像是滚动到那里的时候 整一个ajax请求，将下面内容加载进来。
后来在不经意之间看了下源代码发现的。
看下面是商城的源码截图。
从图中可以看出，源码中有很多 textarea 的标签，里面的值就是即将要加载的html，然后就恍然大悟，原来所谓异步加载也可以这样来实现。
分析实现流程
首先是将要加载的html代码 丢进textarea 里，因为此时html 在 textarea 是一直val形式，不会被浏览器解析渲染，所以页面在刚加载的时候只显示第一屏。然后通过计算滚动条的相对偏移(数学问题)，将textarea的val 值添加到html 的dom里 ，因为浏览器是即时解析的，新添加的dom 会被重新渲染，这样新加的html 就显示出来了。这个就是所谓的lazy load ：伪异步加载。 阅读全部>>
