浅析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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
javascript中的prototype属性实例分析说明
Aug 09 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
深入理解js中this的用法
May 28 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
原生js实现购物车
Sep 23 Javascript
JavaScript实现网页动态生成表格
Nov 25 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 编写的日历
2006/10/09 PHP
用Php实现链结人气统计
2006/10/09 PHP
PHP简洁函数小结
2011/08/12 PHP
两个php日期控制类实例
2014/12/09 PHP
php curl 上传文件代码实例
2015/04/27 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
Angular4学习笔记router的简单使用
2018/03/30 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python加速程序运行的方法
2020/07/29 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
函授教育个人学习的自我评价
2013/12/31 职场文书
写给老师的表扬信
2014/01/21 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
匿名信格式范文
2015/05/27 职场文书
电视新闻稿
2015/07/17 职场文书
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
什么是css原子化,有什么用?
2022/04/24 HTML / CSS