利用CSS、JavaScript及Ajax实现高效的图片预加载


Posted in Javascript onOctober 16, 2013

方法一:用CSS和JavaScript实现预加载

实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。
单纯使用CSS,可容易、高效地预加载图片,代码如下:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } 
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; } 
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

将这三个ID选择器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。
该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间。为了解决这个问题,我们增加了一些JavaScript代码,来推迟预加载的时间,直到页面加载完毕。代码如下:
// better image preloading @ <a href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</a> 
function preloader() { 
if (document.getElementById) { 
document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px"; 
document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"; 
document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"; 
} 
} 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
if (oldonload) { 
oldonload(); 
} 
func(); 
} 
} 
} 
addLoadEvent(preloader);

在该脚本的第一部分,我们获取使用类选择器的元素,并为其设置了background属性,以预加载不同的图片。
该脚本的第二部分,我们使用addLoadEvent()函数来延迟preloader()函数的加载时间,直到页面加载完毕。
如果JavaScript无法在用户的浏览器中正常运行,会发生什么?很简单,图片不会被预加载,当页面调用图片时,正常显示即可。

方法二:仅使用JavaScript实现预加载

上述方法有时确实很高效,但我们逐渐发现它在实际实现过程中会耗费太多时间。相反,我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法,它们可以很漂亮地工作于所有现代浏览器之上。

JavaScript代码段1

只需简单编辑、加载所需要图片的路径与名称即可,很容易实现:

<div class="hidden"> 
<script type="text/javascript"> 
<!--//--><![CDATA[//><!-- 
var images = new Array() 
function preload() { 
for (i = 0; i < preload.arguments.length; i++) { 
images[i] = new Image() 
images[i].src = preload.arguments[i] 
} 
} 
preload( 
"http://domain.tld/gallery/image-001.jpg", 
"http://domain.tld/gallery/image-002.jpg", 
"http://domain.tld/gallery/image-003.jpg" 
) 
//--><!]]> 
</script> 
</div>

该方法尤其适用预加载大量的图片。我的画廊网站使用该技术,预加载图片数量达50多张。将该脚本应用到登录页面,只要用户输入登录帐号,大部分画廊图片将被预加载。

JavaScript代码段2

该方法与上面的方法类似,也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中,根据程序指令进行编辑即可。

<div class="hidden"> 
<script type="text/javascript"> 
<!--//--><![CDATA[//><!-- 
if (document.images) { 
img1 = new Image(); 
img2 = new Image(); 
img3 = new Image(); 
img1.src = "http://domain.tld/path/to/image-001.gif"; 
img2.src = "http://domain.tld/path/to/image-002.gif"; 
img3.src = "http://domain.tld/path/to/image-003.gif"; 
} 
//--><!]]> 
</script> 
</div>

正如所看见,每加载一个图片都需要创建一个变量,如“img1 = new Image();”,及图片源地址声明,如“img3.src = "../path/to/image-003.gif";”。参考该模式,你可根据需要加载任意多的图片。
我们又对该方法进行了改进。将该脚本封装入一个函数中,并使用 addLoadEvent(),延迟预加载时间,直到页面加载完毕。
function preloader() { 
if (document.images) { 
var img1 = new Image(); 
var img2 = new Image(); 
var img3 = new Image(); 
img1.src = "http://domain.tld/path/to/image-001.gif"; 
img2.src = "http://domain.tld/path/to/image-002.gif"; 
img3.src = "http://domain.tld/path/to/image-003.gif"; 
} 
} 
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function') { 
window.onload = func; 
} else { 
window.onload = function() { 
if (oldonload) { 
oldonload(); 
} 
func(); 
} 
} 
} 
addLoadEvent(preloader);

方法三:使用Ajax实现预加载

上面所给出的方法似乎不够酷,那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM,不仅仅预加载图片,还会预加载CSS、JavaScript等相关的东西。使用Ajax,比直接使用JavaScript,优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

window.onload = function() { 
setTimeout(function() { 
// XHR to request a JS and a CSS 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://domain.tld/preload.js'); 
xhr.send(''); 
xhr = new XMLHttpRequest(); 
xhr.open('GET', 'http://domain.tld/preload.css'); 
xhr.send(''); 
// preload image 
new Image().src = "http://domain.tld/preload.png"; 
}, 1000); 
};

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题。
下面,我们看看如何用JavaScript来实现该加载过程:
window.onload = function() { 
setTimeout(function() { 
// reference to <head> 
var head = document.getElementsByTagName('head')[0]; 
// a new CSS 
var css = document.createElement('link'); 
css.type = "text/css"; 
css.rel = "stylesheet"; 
css.href = "http://domain.tld/preload.css"; 
// a new JS 
var js = document.createElement("script"); 
js.type = "text/javascript"; 
js.src = "http://domain.tld/preload.js"; 
// preload JS and CSS 
head.appendChild(css); 
head.appendChild(js); 
// preload image 
new Image().src = "http://domain.tld/preload.png"; 
}, 1000); 
};

这里,我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样,使用Ajax,加载文件不会应用到加载页面上。从这点上看,Ajax方法优越于JavaScript。
Javascript 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
vue登录路由验证的实现
Dec 13 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
div模拟滚动条效果示例代码
Oct 16 #Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 #Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 #Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 #Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 #Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 #Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 #Javascript
You might like
php写的简易聊天室代码
2011/06/04 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python基础之文件读取的讲解
2019/02/16 Python
python函数的作用域及关键字详解
2019/08/20 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
上海方立数码笔试题
2013/10/18 面试题
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
高级工程师岗位职责
2013/12/15 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
父亲节活动策划方案
2014/08/24 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
2014年消防工作总结
2014/11/21 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
Django基础CBV装饰器和中间件
2022/03/22 Python