Question

我很陌生。我必须用ajax写一个相册。单击链接列表中的链接后，将显示一个图像，同时预加载上一个和下一个图像，以便在单击时打开更快。以异步方式或同步方式加载它们。在显示下一张照片后，应自动隐藏上一张照片。在任何给定时间只应显示一张照片。我正在寻找在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>

Answer 1

要将图像预加载到浏览器内存，您应该这样做：

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

javascript / ajax加载和预加载图像

1 个答案: