浏览 12108 次
锁定老帖子 主题:js预加载/延迟加载
该帖已经被评为新手帖
|
|
---|---|
作者 | 正文 |
发表时间:2010-08-08
最后修改:2011-03-14
Pre loader 预加载一般有两种常用方式:xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式,然后使用动态插入节点方法加载的文件都会在加载后立即执行,javascript的执行一方面会占用浏览器js执行进程,另一方面也可能改变页面结构,而css 的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本,但是由于同域的限制 Lazy loader方式在一些图片非常多的网站中非常有用,在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置才加载,这样对于含有很多图片的比较长的网页来说,可以加载的更快,并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。 在腾讯的QQ空间和微博中就采用这样技术实现,在大访问量的网站,这样就相对可以减少服务器的压力,在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来,在下载过程中存在着用户等待内容呈现。 IE中使用new Image().src 去预加载文件。 其他浏览器使用动态插入document.createElement('object')标签来完成加载。 说明: 1. new Image().src 之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存。 2. 动态插入object 标签需要插入到非head部分,以触发加载。 3. ie7 ie8 也可以通过一些代码使用动态object加载文件。 参考; http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html http://www.blogjava.net/sinoly/archive/2007/09/14/145161.html http://www.cnblogs.com/comdeng/archive/2008/06/15/preload_image.html http://www.itfeed.cn/post.asp?id=402 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-08-08
在
<script type='text/javascript' defer='true'>的使用和楼主说的有什么原理上的不同 |
|
返回顶楼 | |
发表时间:2010-08-08
楼主是说当document is ready的时候,在动态加载资源吗?
|
|
返回顶楼 | |
发表时间:2010-08-10
最后修改:2010-08-10
我到是想知道Lazy loader能不能在浏览器可视区域内加载一个DIV中的内容(非图片)
|
|
返回顶楼 | |
发表时间:2010-08-10
moneyfulj 写道 在
<script type='text/javascript' defer='true'>的使用和楼主说的有什么原理上的不同 楼上所说的很好啊。我就遇到这样的问题。 还有一种就是当一个页面图片太多时,可以采取图片异步通信解决。就是一个页面先出文字,当所有文字加载完成后,再加载图片. |
|
返回顶楼 | |
发表时间:2010-08-10
skyfen 写道 moneyfulj 写道 在
<script type='text/javascript' defer='true'>的使用和楼主说的有什么原理上的不同 楼上所说的很好啊。我就遇到这样的问题。 还有一种就是当一个页面图片太多时,可以采取图片异步通信解决。就是一个页面先出文字,当所有文字加载完成后,再加载图片. 浏览器兼容问题的存在。 |
|
返回顶楼 | |
发表时间:2010-08-10
#2 & #1 are not talking the same thing!
<script type='text/javascript' defer='defer'> is lame |
|
返回顶楼 | |
发表时间:2010-08-11
|
|
返回顶楼 | |
发表时间:2010-08-11
|
|
返回顶楼 | |