浅析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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python中异常重试的解决方案详解
2017/05/05 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
python实现密码强度校验
2020/03/18 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
旅游项目开发策划书
2014/01/18 职场文书
个人自我剖析材料
2014/02/07 职场文书
学生手册评语
2014/05/05 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL