javajs列表预加载_浅析js预加载/延迟加载

Pre loader 预加载一般有两种常用方式&＃xff1a;xhr和动态插入节点的方式。动态插入节点是最为简单也最为广泛的一种异步加载方式&＃xff0c;然后使用动态插入节点方法加载的文件都会 在加载后立即执行&＃xff0c;Javascript的执行一方面会占用浏览器js执行进程&＃xff0c;另一方面也可能改变页面结构&＃xff0c;而css 的执行更有可能让整个页面变化。xhr方式虽然不会执行脚本&＃xff0c;但是由于同域的限制

Lazy loader方式在一些图片非常多的网站中非常有用&＃xff0c;在浏览器可视区域外的图片不会被载入&＃xff0c;直到用户将页面滚动到它们所在的位置才加载&＃xff0c;这样对于含有很多 图片的比较长的网页来说&＃xff0c;可以加载的更快&＃xff0c;并且还能节省服务器带宽。jQuery插件中也有插件来实现该功能。

在腾讯的QQ空间和微博中就采用这样技术实现&＃xff0c;在大访问量的网站&＃xff0c;这样就相对可以减少服务器的压力&＃xff0c;在用户访问到所见区域和下面内容时候才去请求。而不是传统的一次把整个页面下载过来&＃xff0c;在下载过程中存在着用户等待内容呈现。

IE中使用new Image().src 去预加载文件。

其他浏览器使用动态插入document.createElement(&＃39;object&＃39;)标签来完成加载。

说明&＃xff1a;

1. new Image().src 之所以不能在ff中使用是因为ff对图片实现了一套单独的缓存。 同时safari和chrome看起来也没有被缓存。

2. 动态插入object 标签需要插入到非head部分&＃xff0c;以触发加载。

3. ie7 ie8 也可以通过一些代码使用动态object加载文件。