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程序设计有所帮助。