浅析js预加载/延迟加载
更新时间：2014年09月25日 11:36:16 投稿：hebedich
本文主要介绍了js预加载和延时加载2种技术，简单分析了他们的实现方式和优缺点，非常的实用，有需要的朋友参考下
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加载文件。
相关文章
JavaScript setTimeout和setInterval的用法与区别详解
Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,下面这篇文章主要给大家介绍了关于JavaScript setTimeout和setInterval的用法与区别,需要的朋友可以参考下2022-04-04
BootStrap实现带有增删改查功能的表格(DEMO详解)
这篇文章主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧2016-10-10
这篇文章主要介绍了js之如何筛选出两个数组相同的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
初学者可能对Javascript的定时器有误解，认为它们是线程，其实Javascript是运行于单线程中的，而定时器仅仅是计划在未来的某个时间执行，而具体的执行时间是不能保证的，因为在页面的生命周期中，不同的时间可能有其它代码在控制Javascript的里进程。2015-05-05
这篇文章主要介绍了普通web整合quartz跑定时任务,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
一些实用的TAB效果...2006-11-11
这篇文章主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章介绍了JS限制Textarea文本域字符个数的具体实现，有需要的朋友可以参考一下2013-08-08
这篇文章主要为大家详细介绍了js+html5实现复制文字按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
下面小编就为大家带来一篇浅谈JS验证表单文本域输入空格的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
最新评论