javascript/jquery在页面准备就绪时开始加载隐藏图像

我在一个网站上有很多图片，有两个版本：一个大版本和一个小版本

当您访问网站时，小版本会自动显示，当您单击它们时，我使用jquery打开一个隐藏的div并插入大版本

由于加载页面时浏览器看不到大图像（没有

img

将其作为

src

），因此在用户单击其中一个小图像放大之前，不会加载大图像，因此不会减慢页面加载时间

然而，为了使UI尽可能响应，我希望从页面加载的那一刻起就开始缓冲大图像（这样当用户单击其中一个图像时它们就在那里）

---

如何开始在后台加载图像？

当您将

src

设置为

图像

对象时，可以开始在后台加载图像，例如：

(new Image).src = src;

这里有一个函数供您使用：

function preloadImages() {
    for(var i=0; i<arguments.length; i++) {
        (new Image).src = arguments[i];
    }
}

preloadImages('one.jpg', 'two.jpg');

---

将图像逐个加载到不可见的

img

元素中-客户端将缓存它们并更快地显示它们

window.onload = function() {
    preloadImages('one.jpg', 'two.jpg');
};