上面所给出的方法似乎不够酷，那现在来看一个使用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', 'https://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'https://domain.tld/preload.css');
xhr.send('');
// preload image new Image().src = "";
}, 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 = "";
// a new JS
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "";
// preload JS and CSS head.appendChild(css);
head.appendChild(js);
// preload image
new Image().src = "";
}, 1000);
};