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

Question

我在一个网站上有一堆图像，它们有两个版本：一个大的和一个小的。

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

由于在页面加载时浏览器看不到大图像（没有img将它们作为 a src），因此在用户单击其中一个小图像放大它之前不会加载它们，因此它们不会减慢页面加载时间.

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

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

Answer 1

当您将 a 设置src为Image对象 f.ex 时，您可以开始在后台加载图像：

(new Image).src = src;

这是一个适合您的功能：

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

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

我建议您在窗口加载后（在window.onload回调内）开始预加载图像，以防止它破坏 UI：

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