Perishable Press网站近日发表了一篇文章《3 Ways to Preload Images with CSS, JavaScript, or Ajax》,分享了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。下面为译文。
预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。
方法一:用CSS和JavaScript实现预加载
实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。
单纯使用CSS,可容易、高效地预加载图片,代码如下:
将这三个ID选择器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。
该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间。为了解决这个问题,我们增加了一些JavaScript代码,来推迟预加载的时间,直到页面加载完毕。代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function preloader() {
if (document.getElementById)
{
}
}
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
只需简单编辑、加载所需要图片的路径与名称即可,很容易实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div class= "hidden" >
<script type= "text/javascript" >
<!--
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(
)
</script>
</div>
|
该方法尤其适用预加载大量的图片。我的画廊网站使用该技术,预加载图片数量达50多张。将该脚本应用到登录页面,只要用户输入登录帐号,大部分画廊图片将被预加载。
JavaScript代码段2
该方法与上面的方法类似,也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中,根据程序指令进行编辑即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<div class= "hidden" >
<script type= "text/javascript" >
<!--
if (document.images)
{
img1 = new Image();
img2 = new Image();
img3 = new Image();
}
</script>
</div>
|
正如所看见,每加载一个图片都需要创建一个变量,如“img1=newImage();”,及图片源地址声明,如“img3.src="../path/to/image-003.gif";”。参考该模式,你可根据需要加载任意多的图片。
我们又对该方法进行了改进。将该脚本封装入一个函数中,并使用addLoadEvent(),延迟预加载时间,直到页面加载完毕。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function preloader() {
if (document.images)
{
var img1
= new Image();
var img2
= new Image();
var img3
= new Image();
}
}
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的加载不会影响到当前页面。该方法简洁、高效。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
window.onload = function ()
{
setTimeout( function ()
{
var xhr
= new XMLHttpRequest();
xhr.send( '' );
xhr = new XMLHttpRequest();
xhr.send( '' );
}, 1000);
};
|
上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起,而导致正常页面出现功能问题。
下面,我们看看如何用JavaScript来实现该加载过程:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
window.onload = function ()
{
setTimeout( function ()
{
var head
= document.getElementsByTagName( 'head' )[0];
var css
= document.createElement( 'link' );
css.type = "text/css" ;
css.rel = "stylesheet" ;
var js
= document.createElement( "script" );
js.type = "text/javascript" ;
head.appendChild(css);
head.appendChild(js);
}, 1000);
};
|
这里,我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样,使用Ajax,加载文件不会应用到加载页面上。从这点上看,Ajax方法优越于JavaScript。
如果你还有什么好的图片预加载方法,及对上述方法的改进建议,欢迎在评论中分享。(编译:陈秋歌 审校:夏梦竹)
原文链接:3 Ways to Preload Images with CSS, JavaScript, or Ajax
本文为CSDN编译整理,未经允许不得转载,如需转载请联系market#csdn.net(#换成@)
分享到:
相关推荐
预加载图片是提高用户体验的一个很好方法,实现图片预加载可以使用css、JavaScript、Ajax三种方法。下面逐一给大家介绍利用CSS、JavaScript及Ajax实现图片预加载的方法,需要的朋友参考下吧
方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。 单纯使用CSS,可容易、高效地预加载图片...
本文介绍了实现图片预加载的三大方法(CSS/JAVASCRIPT/AJAX)以及这三种方法的优缺点分析,是篇非常值得推荐的文章,小伙伴们可要仔细研究下。
图片预加载有大体有几...空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=0 var postaction=function(){} //此处增加了一个pos
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
12.3.2 预加载图片和Image()构造函数 12.3.3 随机显示图片和onClick事件 12.3.4 图片地图与JavaScript 12.4 缩放图片以适应窗口 12.5 幻灯简介 12.5.1 带有控制按钮的简单幻灯展示 ...
13.3.2 Aiax预加载功能 13.4 增加丰富的渐变效果 13.4.1 跨浏览器的不透明规则 13.4.2 实现淡入/淡出渐变 13.4.3 集成JavaScript定时器 13.5 附加功能 13.5.1 插入额外提要 13.5.2 集成跳过和暂停功能 13.6 避免项目...
Ajax-Tokenize2.zip,tokenize2是一个插件,它允许用户从预定义的列表或ajax中选择多个项,在键入时使用自动完成功能查找每个项。当你在facebook上填写recipients字段发送消息或tumblr上的标签时,你可能看到过类似的...
Ajax-Flight-Booking-System-JavaServlets_App.zip,基于Java Servlet、Java Server页面(JSP)的模型视图控制器(MVC)架构的土耳其航空公司(Web应用)的企业级航班预订系统。实现了对用户的认证和授权。该web应用...
Ajax-Mobile-mechanic.zip,这个项目的实施是为了减少体力劳动。它是一款面向汽车机械、中小型汽车修理厂的在线汽车修理服务预订软件设计。移动机械维修调度软件的人性化设计将有助于使企业更容易运行。,ajax代表异步...
bulid使用html5、css3、javascript、php 5.0 、ajax、mysql。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...
7.3 预加载显示图片的方法 7.4 Facebook风格的图片预加载 7.5 检查图片src是否有效 7.6 上下滑动的图片 7.7 淡入淡出一幅图片,进入另一幅图片 7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 ...
Ajax-typeahead.zip,快速、轻量级的预输入增强文本输入。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...
第三部分 Ajax:与Web服务器通信 327 第11章 初识Ajax 327 11.1 什么是Ajax 328 11.2 Ajax基础知识 329 11.2.1 拼图块 329 11.2.2 和Web服务器通信 331 11.3 Ajax的jQuery方式 334 11.3.1 使用load( )函数 335 11.3.2...
Ajax-ecare.zip,这是一个由原始php和mysql支持的医生预约系统,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...