浅析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 的 prototype问题。
Jan 03 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
javascript字符串函数汇总
Dec 06 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
javascript的this关键字详解
2019/05/20 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
今天学到的CSS最新技术(与图片背景相关)
2012/12/24 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
办公室前台岗位职责范本
2013/12/10 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
《匆匆》教学反思
2014/02/22 职场文书
优秀员工获奖感言
2014/03/01 职场文书
优秀员工评优方案
2014/06/13 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
光荣之路观后感
2015/06/12 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书