使用Javascript预加载图像

我正在使用Javascript为我的网站（ASP.NET）制作简单的图像查看器栏，每次都显示3张图片，用户可以使用两个按钮转到下一张或上一张图片，当用户将鼠标悬停在每张图片上时，所选图像的较大版本将显示在单独的DIV上。使用Javascript预加载图像

唯一的问题是，当用户在选定时间超出图像时，在显示大图像（首次加载大图像时）之前存在延迟。我怎么解决这个问题？有没有什么办法可以初步加载所有大图像（当然，它们不应该是可见的），我的选择是什么？

有什么办法可以纯粹用javascript做到吗？我不想使用jQuery

2011-12-23 Ali_dotNet

你应该真的开始学习jQuery。每次构建网站时都不需要重新发现轮子。 – 2011-12-23 11:03:13

创建一个像这样的身体末端的元素<div id="preload">将此div设置为display:none并将图像放置在其中。现在，当你使用你的画廊时，不应该有任何延迟。

2011-12-23 11:04:16 ThomasReggi

使用纯JavaScript的另一种方法是这样的一个：

var img = new Image(); 
img.src = "url to image";

这就是它！这将向服务器发出请求。您可以为其他图像执行此操作。如果你想知道什么时候它最终加载，你可以添加加载事件。例如：

img.onload = function(){ 
    alert("image ready"); 
}

2011-12-23 11:07:13 epignosisx

你可以做一个简单的预载功能：

function preload() { 
    while(arguments.length) { 
     new Image().src = [].shift.call(arguments); 
    } 
}

然后使用它像这样，在domready中或在文档的末尾：

preload('img1.jpg', 'path/to/img2.jpg', 'img3.jpg');

这将使浏览器加载并缓存图像。这可能比将它们放置在隐藏的DIV中更好，因为您将完全控制浏览器何时开始加载图像并可能阻止客户端和服务器之间的下载插槽。

2011-12-23 11:09:41 David

+1优秀而优雅。 – gideon 2012-02-28 10:18:44

回答