可以看到，每次加载图片的时候，都需要创建一个变量，比如"img1=newImage();”，以及图片来源地址声明，如“img3.src=“../path/to/image-003.gif”;”。参考这个模式，你可以加载任意数量的图片。我们进一步改进了方法。将此脚本包装在一个函数中，并使用addLoadEvent()来延迟预加载，直到页面加载完毕。functionpreloader(){if(document.images){varimg1=newImage();varimg2=newImage();varimg3=newImage();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";}}functionaddLoadEvent(func){varoldonload=window.onload;if(typeofwindow.onload!='function'){window.onload=func;}else{window.onload=function(){if(oldonload){oldonload();}func();}}}addLoadEvent(预加载器);方法三：使用Ajax实现预加载上面给出的方法似乎还不够酷，下面我们来看一个使用Ajax实现图片预加载的方法。此方法使用DOM不仅预加载图像，还预加载CSS、JavaScript和其他相关内容。与直接使用JavaScript相比，使用Ajax的好处是JavaScript和CSS的加载不会影响当前页面。该方法简单高效。window.onload=function(){setTimeout(function(){//XHRtorequestajsandaCSSvarxhr=newXMLHttpRequest();xhr.open('GET','http://domain.tld/preload.js');xhr.send('');xhr=newXMLHttpRequest();xhr.open('GET','http://domain.tld/preload.css');xhr.send('');//preloadimagenewImage().src="http://domain.tld/preload.png";},1000);};上面的代码预加载“preload.js”、“preload.css”和“preload.png”。1000ms超时是为了防止脚本挂起，导致正常页面出现功能问题。接下来我们看看如何用JavaScript实现加载过程：window.onload=function(){setTimeout(function(){//referencetovarhead=document.getElementsByTagName('head')[0];//anewCSSvarcss=document.createElement('link');css.type="text/css";css.rel="stylesheet";css.href="http://domain.tld/preload.css";//anewJSvarjs=document.createElement("script");js.type="text/javascript";js.src="http://domain.tld/preload.js";//preloadJSandCSShead.appendChild(css);head.appendChild(js);//preloadimagenewImage().src="http://domain.tld/preload.png";},1000);};这里我们通过DOM创建三个元素，实现三个文件的预加载。如上所述，使用Ajax，加载文件不会应用于加载页面。从这一点来看，Ajax方法优于JavaScript。