javascript/ajax加載和預加載圖片

我對此很新穎。我必須用ajax寫一個相冊。點擊鏈接列表中的鏈接後，圖像將顯示並同時預加載前一張和下一張圖片，以便點擊時可以更快地打開。可以異步或同步加載它們。顯示下一張照片後，應該自動隱藏上一張照片。任何時候只能顯示一張照片。我正在看編寫JavaScript部分的for循環，這是做到這一點的最佳方式？javascript/ajax加載和預加載圖片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<p id="Title">text</p> 
<p id="Body">text 
</p> 

<p class="background">&nbsp;</p> 

<p class="link1"><a href="image1.jpg">Photo 1</a> </p> 
<p class="link2"><a href="image2.jpg">Photo 2</a> </p> 
<p class="link3"><a href="image3.jpg">Photo 3</a></p> 
<p class="link4"><a href="image4.jpg">Photo 4</a></p> 
<p class="link5"><a href="image5.jpg">Photo 5</a> </p> 
<p class="link6"><a href="image6.jpg">Photo 6</a> </p> 
<p class="link7"><a href="image7.jpg">Photo 7</a> </p> 
<p class="link8"><a href="image8.jpg">Photo 8</a> </p> 
<p class="link9"><a href="image9.jpg">Photo 9</a> </p> 
<p class="link10"><a href="image10.jpg">Photo 10</a> </p> 
<p class="link11"><a href="image11.jpg">Photo 11</a> </p> 
<p class="link12"><a href="image12.jpg">Photo 12</a> </p> 
<p class="link13"><a href="image13.jpg">Photo 13</a> </p> 
<p class="link14"><a href="image14.jpg">Photo 14</a> </p> 
<p class="link15"><a href="image15.jpg">Photo 15</a> </p> 
<p class="link16"><a href="image16.jpg">Photo 16</a> </p> 
<p class="link17"><a href="image17.jpg">Photo 17</a> </p> 
<p class="link18"><a href="image18.jpg">Photo 18</a> </p> 
<p class="link19"><a href="image19.jpg">Photo 19</a> </p> 
<p class="link20"><a href="image20.jpg">Photo 20</a> </p> 

<script> 


var images= new Array() 
    images[0]="image1.jpg"; 
    images[1]="image2.jpg"; 
    images[2]="image3.jpg"; 
    images[3]="image4.jpg"; 
    images[4]="image5.jpg"; 
    images[5]="image6.jpg"; 
    images[6]="image7.jpg"; 
    images[7]="image8.jpg"; 
    images[8]="image9.jpg"; 
    images[9]="image10.jpg"; 
    images[10]="image11.jpg"; 
    images[11]="image12.jpg"; 
    images[12]="image13.jpg"; 
    images[13]="image14.jpg"; 
    images[14]="image15.jpg"; 
    images[15]="image16.jpg"; 
    images[16]="image17.jpg"; 
    images[17]="image18.jpg"; 
    images[19]="image19.jpg"; 
    images[20]="image20.jpg"; 

var numImages = images.length; 
var count = 0; 
function preloadImage() 
{ 
    i=images[]; 
    for(i=0;i<=numImages; i++) 
    images[i].onclick=preload(images[i+1]; 
} 
</script> 


</body> 
</html>

來源

2013-04-12 Rosie Roberts

要預裝圖像瀏覽器的內存，你應該這樣做：

function preloadImage(url) { 
    var image = new Image(); 
    image.src = "url_to_image.png"; // in this moment browser will request the image 
    return image; // returning handler in case you want to use it later 
}

您可以考慮使用一些現有的畫廊像fancybox

來源

2013-04-12 19:20:08 chrmod

javascript/ajax加載和預加載圖片

回答

相關問題