Question

我有一个网页，其中大量图像使用图像从服务器调用 scr 属性。

我创建了一个由 td click 触发的功能。

function GoToStep(stepNo) {
 var imgSrc = $("#h1" + stepNo).val();
        $(".img_vertical").css("background-image", "url(" + imgSrc + ")");
}

现在的问题是这个。对于较慢的连接，图像在一些之后时刻。

我可以预加载图片以避免用户点击时的等待时间的 TD

我已经看到一些jquery函数来预加载图像。

请知道如何实现它。

Answer 1

这可以使用一些javascript函数来完成。引自another question。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

解释javascript预加载器的工作原理（different question）

[...]它的工作方式只是创建一个新的Image对象和设置它的src，浏览器将去抓取图像。不是将此特定图像添加到浏览器，但是到时候了通过我们设置的任何方法在页面中显示图像浏览器已经将它放在缓存中，不会去取它再次。 [...]

所以在你的情况下，你应该使用像

这样的东西

$(function() {
    // Do stuff when DOM is ready
    preload([
        'img/bg1.jpg',
        'img/bg2.jpg',
        'img/bg3.jpg'
    ]);
});

Answer 2

预加载图像相当于加载图像但从不显示图像。所以，你可以这样轻松地做到这一点：

<img src="image.png" alt="" style="display:none;"/>

现在，只要html开始渲染，就会加载此图像。每当您需要将此图像用作显示或背景时，只需将地址设置为image.png，它将自动从浏览器的缓存中获取。

预加载图像以便稍后在单击事件jQuery上显示

2 个答案: