浅析js预加载/延迟加载


Posted in Javascript onSeptember 25, 2014

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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
JavaScript中var关键字的使用详解
Aug 14 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
loading动画特效小结
Jan 22 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
深入了解Node.js中的一些特性
Sep 25 #Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 #Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 #Javascript
JS小游戏之宇宙战机源码详解
Sep 25 #Javascript
JS小游戏之极速快跑源码详解
Sep 25 #Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 #Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 #Javascript
You might like
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
使用php清除bom示例
2014/03/03 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
基于python绘制科赫雪花
2018/06/22 Python
python队列Queue的详解
2019/05/10 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
python学生管理系统的实现
2020/04/05 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
经典大学生求职信范文
2014/01/06 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
难忘的一课教学反思
2014/04/30 职场文书
公司经理任命书
2014/06/05 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
教师党员个人自我评价
2015/03/04 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
Python基础详解之描述符
2021/04/28 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript