Question

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

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

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

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

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

Answer 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');
};

当页面准备好时，javascript / jquery开始加载隐藏的图像

1 个答案: