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

js跨域问题

0 ~o~

判断输入的字符是否为中文

0 ~o~

乱翻乱教- jQuery 制作N级导航菜单

14 feet

乱翻乱教-使用JS输出HTML串最快的方法

5 feet

Page 1 of 3123

Who am I ?

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

最新在啃

actionscript javascript

新鲜的肉

最新评论

  • 小米: 您在我那留言“吓一跳”,哪里吓到了哦?呵呵
  • 小鑫: notpad++ …… 少了”e”
  • Bee君: 这些真的太深奥…..
  • 任鸟飞: 新浪微博 短网址 有白名单之多,令我很郁闷,打算弃用新浪微博。
  • 葉子: 我是更土的人,告诉我吧

订阅-rss-永久链接

MT
备案号:浙ICP备09020026号