js预加载图片方法汇总
本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下：
1.纯CSS：
#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;
}
2.JS+CSS优化：
//betterimagepreloading@http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
functionpreloader(){
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";
}
}
functionaddLoadEvent(func){
varoldonload=window.onload;
if(typeofwindow.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
if(oldonload){
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
3.JS代码1：
<divclass="hidden">
<scripttype="text/javascript">
<!--//--><![CDATA[//><!--
varimages=newArray()
functionpreload(){
for(i=0;i<preload.arguments.length;i++){
images[i]=newImage()
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>
4.JS代码2：
<divclass="hidden">
<scripttype="text/javascript">
<!--//--><![CDATA[//><!--
if(document.images){
img1=newImage();
img2=newImage();
img3=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";
}
//--><!]]>
</script>
</div>
5.JS代码优化2：
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(preloader);
6.Ajax代码1：
window.onload=function(){
setTimeout(function(){
//XHRtorequestaJSandaCSS
varxhr=newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.js');
xhr.send('');
xhr=newXMLHttpRequest();
xhr.open('GET','http://domain.tld/preload.css');
xhr.send('');
//preloadimage
newImage().src="http://domain.tld/preload.png";
},1000);
};
7.Ajax代码2：
window.onload=function(){
setTimeout(function(){
//referenceto<head>
varhead=document.getElementsByTagName('head')[0];
//anewCSS
varcss=document.createElement('link');
css.type="text/css";
css.rel="stylesheet";
css.href="http://domain.tld/preload.css";
//anewJS
varjs=document.createElement("script");
js.type="text/javascript";
js.src="http://domain.tld/preload.js";
//preloadJSandCSS
head.appendChild(css);
head.appendChild(js);
//preloadimage
newImage().src="http://domain.tld/preload.png";
},1000);
};
希望本文所述对大家的javascript程序设计有所帮助。