预加载：通过创建image对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/public.css"/> <script type="text/javascript" src="../js/rainbow.js"></script> <script type="text/javascript"> window.onload=function(){ var oImg=document.getElementById("img"); var oImage=new Image(); var arr=[ '../img/hd1.jpg', '../img/hd2.jpg', '../img/hd3.jpg', '../img/hd4.jpg', '../img/hd5.jpg', '../img/hd6.jpg', '../img/hd7.jpg', '../img/hd8.jpg' ]; var iCur=0; var i=0; show(); function show(){ //通过src属性将url资源加载完成并存放在本地缓存中 oImage.src=arr[iCur]; oImage.onload=function(){ iCur++; // console.log(iCur); if(iCur<arr.length){ show(); } // document.title=iCur+'/'+arr.length; } } oImg.onclick=function(){ i++; oImg.src=arr[i%arr.length]; } } </script> </head> <body> <img src="../img/hd1.jpg" id='img'/> </body> </html>