你正在浏览的是 生活琐碎 目录

一知半解 – 分析淘宝商城首页的 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 :伪异步加载。 阅读全部>>

换个地方勃起 — 新浪微博

16 feet

走马观花 – jQuery调试工具- jQuery pad

13 feet

不走寻常路–Win7下vs2008搭建M8开发平台

17 feet

整得连妈都不认识了 – M8 新固件9.6.X 试用体验

22 feet

Page 1 of 1812345...Last »

Who am I ?

飞鱼,男,浙江人士。
非专业前端设计师兼程序员。
目前在 淘宝-淘日本 工作

最新在啃

actionscript javascript

新鲜的肉

最新评论

  • Leeiio: 呃,我的目光焦点是图片….win的时候我也是用notepad++用了很长的一段时间直到遇见了vim
  • 印第安小狮: 啊~结合着官网跟博主你这边的教程一起~总算ok啦~~~~~庆贺~
  • 大猫: 可以找我要KEY
  • 大猫: http://www.jetbrains.com/
  • 葉子: Intellij IDEA 这是哪里的东西

订阅-rss-永久链接

MT
备案号:浙ICP备09020026号