標籤:nload 資源 var cti 建立 nbsp styles onclick cli
預先載入:通過建立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>
網站最佳化--圖片的預先載入與懶載入(下)