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

【问题标题】：javascript/jquery start loading hidden images when page is ready页面准备就绪时，javascript/jquery 开始加载隐藏图像
【发布时间】：2012-12-11 23:45:58
【问题描述】：

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

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

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

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

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

【问题讨论】：

将图像加载到一个不可见的img 元素中 - 客户端将缓存它们并更快地显示它们

标签： javascript image performance

【解决方案1】：

当您将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');
};

【讨论】：