圖片預加載, 效果非常明顯, 特別是有多個圖,
方法很簡單 , 體驗提升了不少
<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>
將該腳本應用到登錄頁面，只要用戶輸入登錄帳號，大部分畫廊圖片將被預加載。
面所給出的方法似乎不夠酷，那現在來看一個使用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。
http://www.qdfuns.com/notes/36458/93b1e49cbfc3d30d568b414e242b5aa1.html