文档章节

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

詹真琦
 詹真琦
发布于 2013/12/08 15:30
字数 2018
阅读 186
收藏 14

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。

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

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

单纯使用CSS,可容易、高效地预加载图片,代码如下:

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

#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代码,来推迟预加载的时间,直到页面加载完毕。代码如下:

  1. // 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> 
  2. function preloader() { 
  3.     if (document.getElementById) { 
  4.         document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px"
  5.         document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"
  6.         document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"
  7.     } 
  8. function addLoadEvent(func) { 
  9.     var oldonload = window.onload; 
  10.     if (typeof window.onload != 'function') { 
  11.         window.onload = func; 
  12.     } else
  13.         window.onload = function() { 
  14.             if (oldonload) { 
  15.                 oldonload(); 
  16.             } 
  17.             func(); 
  18.         } 
  19.     } 
  20. addLoadEvent(preloader); 

// better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/ 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

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

  1. <div class="hidden"
  2.     <script type="text/javascript"
  3.         <!--//--><![CDATA[//><!-- 
  4.             var images = new Array() 
  5.             function preload() { 
  6.                 for (i = 0; i < preload.arguments.length; i++) { 
  7.                     images[i] = new Image() 
  8.                     images[i].src = preload.arguments[i] 
  9.                 } 
  10.             } 
  11.             preload( 
  12.                 "http://domain.tld/gallery/image-001.jpg"
  13.                 "http://domain.tld/gallery/image-002.jpg"
  14.                 "http://domain.tld/gallery/image-003.jpg" 
  15.             ) 
  16.         //--><!]]> 
  17.     </script> 
  18. </div> 

<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页中,根据程序指令进行编辑即可。

  1. <div class="hidden"
  2.     <script type="text/javascript"
  3.         <!--//--><![CDATA[//><!-- 
  4.             if (document.images) { 
  5.                 img1 = new Image(); 
  6.                 img2 = new Image(); 
  7.                 img3 = new Image(); 
  8.                 img1.src = "http://domain.tld/path/to/image-001.gif"
  9.                 img2.src = "http://domain.tld/path/to/image-002.gif"
  10.                 img3.src = "http://domain.tld/path/to/image-003.gif"
  11.             } 
  12.         //--><!]]> 
  13.     </script> 
  14. </div> 

<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(),延迟预加载时间,直到页面加载完毕。

  1. function preloader() { 
  2.     if (document.images) { 
  3.         var img1 = new Image(); 
  4.         var img2 = new Image(); 
  5.         var img3 = new Image(); 
  6.         img1.src = "http://domain.tld/path/to/image-001.gif"
  7.         img2.src = "http://domain.tld/path/to/image-002.gif"
  8.         img3.src = "http://domain.tld/path/to/image-003.gif"
  9.     } 
  10. function addLoadEvent(func) { 
  11.     var oldonload = window.onload; 
  12.     if (typeof window.onload != 'function') { 
  13.         window.onload = func; 
  14.     } else
  15.         window.onload = function() { 
  16.             if (oldonload) { 
  17.                 oldonload(); 
  18.             } 
  19.             func(); 
  20.         } 
  21.     } 
  22. addLoadEvent(preloader); 

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的加载不会影响到当前页面。该方法简洁、高效。

  1. window.onload = function() { 
  2.     setTimeout(function() { 
  3.         // XHR to request a JS and a CSS 
  4.         var xhr = new XMLHttpRequest(); 
  5.         xhr.open('GET', 'http://domain.tld/preload.js'); 
  6.         xhr.send(''); 
  7.         xhr = new XMLHttpRequest(); 
  8.         xhr.open('GET', 'http://domain.tld/preload.css'); 
  9.         xhr.send(''); 
  10.         // preload image 
  11.         new Image().src = "http://domain.tld/preload.png"
  12.     }, 1000); 
  13. }; 

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来实现该加载过程:

  1. window.onload = function() { 
  2.  
  3.     setTimeout(function() { 
  4.  
  5.         // reference to <head> 
  6.         var head = document.getElementsByTagName('head')[0]; 
  7.  
  8.         // a new CSS 
  9.         var css = document.createElement('link'); 
  10.         css.type = "text/css"
  11.         css.rel  = "stylesheet"
  12.         css.href = "http://domain.tld/preload.css"
  13.  
  14.         // a new JS 
  15.         var js  = document.createElement("script"); 
  16.         js.type = "text/javascript"
  17.         js.src  = "http://domain.tld/preload.js"
  18.  
  19.         // preload JS and CSS 
  20.         head.appendChild(css); 
  21.         head.appendChild(js); 
  22.  
  23.         // preload image 
  24.         new Image().src = "http://domain.tld/preload.png"
  25.  
  26.     }, 1000); 
  27.  
  28. }; 

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。

本文转载自:http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-css-javascript-ajax

共有 人打赏支持
詹真琦
粉丝 18
博文 13
码字总数 4589
作品 0
成都
程序员
私信 提问
加载中

评论(1)

天天-_-
天天-_-
学习了,
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

摘要:图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站。对图片进行预加载,不失为一个高效的解决方案。如何实现预加载?本文将例举利用CSS、JavaScript及Ajax实现...

spademan
2013/10/22
0
0
Best Practices for Speeding Up Your Web Site(4)

十四、 Make Ajax Cacheable tag: content 使Ajax可缓存 标签:内容 Ajax的显著好处之一是对于用户来说它提供了瞬间的反馈,因为它通过异步方式从后端服务器请求信息。然而,使用Ajax也不能保...

big军
2011/07/07
0
0
web前端性能评测和常规优化方案

如何评测前端性能和优化? 前端开发页面要遵循的基本标准: 1. 统一使用框架、样式表base 2. html、CSS、JS编码要符合前端基本规范 3. CSS、JS进行压缩,多个CSS、JS时,需要进行CDN合并 4....

psasjs
2018/07/30
0
0
大型电子商务网站架构之-前端优化

1 前端优化必要性 随着互联网的发展,前端优化越来越被人们重视,在一个大型的大型电子商务网站技术架构中,前端架构一定是一项必不可少的工作,国内几个大型的互联网公司也有非常强大的前端...

老古董
2012/03/23
1K
0
加速编码的 JavaScript 库和工具

JavaScript库是 一个提前写好的JavaScript文件库,它可以很容易的开发基于JavaScript的应用,特别是AJAX和一些其它的以web为中心的技术。运用JavaScript最基本的方式是嵌入以写好的JavaScrip...

oschina
2013/10/21
584
0

没有更多内容

加载失败,请刷新页面

加载更多

filebeat multiline配置(转)

使用filebeat5.0.1版本,用filebeat作为日志收集工具时: java日志格式需要多行匹配,在filebeat配置文件中添加: ### Multiline options # Mutiline can be used for log messages spanning...

xiaomin0322
25分钟前
1
0
ConstraintLayout的基本使用

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="ht......

SuShine
28分钟前
1
0
ActiveMQ多个消费者消费不均匀问题

如果客户端处理很慢的话,Broker会在之前发送消息的反馈之前,继续发送新的消息到客户端。如果客户端依旧很慢的话,没有得到确认反馈的消息会持续增长。在这种情况下,Broker有可能会停止发送...

编程SHA
29分钟前
1
0
【机器学习PAI实战】—— 玩转人工智能之综述

模型训练与在线预测服务、推荐算法四部曲、机器学习PAI实战、更多精彩,尽在开发者分会场 【机器学习PAI实战】—— 玩转人工智能之商品价格预测 【机器学习PAI实战】—— 玩转人工智能之你最...

阿里云云栖社区
33分钟前
1
0
根据国务院2019年劳动节假期安排五一放假四天 免费节假日api第一时间调整

根据国务院发布http://www.gov.cn/zhengce/content/2019-03/22/content_5375877.htm 以下为原文 国务院办公厅关于调整 2019年劳动节假期安排的通知 国办发明电〔2019〕3号 各省、自治区、直辖...

xiaogg
37分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部