java 图片预加载图片_[转]利用CSS、JavaScript及Ajax实现图片预加载的三大方法

Perishable Press网站近日发表了一篇文章《3 Ways to Preload Images with CSS, JavaScript, or Ajax》，分享了利用CSS、JavaScript及Ajax实现图片预加载的三大方法。下面为译文。

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图

片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技

术，来增强网站的性能与可用性。

方法一：用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; }

将 这三个ID选择器应用到(X)HTML元素中，我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不 变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效，不需要任何JavaScript。

该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间。为了解决这个问题，我们增加了一些JavaScript代码，来推迟预加载的时间，直到页面加载完毕。代码如下：

1 //better image preloading @ http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/

2 functionpreloader() {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 }9 functionaddLoadEvent(func) {10 var oldonload =window.onload;11 if (typeof window.onload != 'function') {12 window.onload =func;13 } else{14 window.onload = function() {15 if(oldonload) {16 oldonload();17 }18 func();19 }20 }21 }22 addLoadEvent(preloader);

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

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

JavaScript代码段1

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

1

2

3

17

18