0

私はこれで非常に新しいです。ajax を使用してフォト アルバムを作成する必要があります。リンクのリストからリンクをクリックすると、画像が表示され、同時に前の画像と次の画像がプリロードされるため、クリックするとすばやく開くことができます。それらを非同期または同期でロードします。次の写真が公開された後、前の写真は自動的に非表示になります。一度に表示できる写真は 1 つだけです。javascript 部分に for ループを書くことを検討していましたが、これが最善の方法ですか?

<!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>
4

1 に答える 1

0

ブラウザのメモリに画像をプリロードするには、次のようにする必要があります。

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-12T19:20:08.743 に答える