使用Javascript预加载图像

Question

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

唯一的问题是当用户在所选时间内覆盖图像时，在显示大图像之前会有延迟（因为第一次加载大图像时）。我怎么解决这个问题？有什么方法我可以最初加载所有大图像（当然它们不应该是可见的）我有什么选择？

有什么方法可以用javascript纯粹地做到这一点？我不想使用jQuery

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

然后在domready或文档末尾使用它：

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

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