0

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

我创建了一个由td click触发的函数。

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

现在的问题是这样的。对于较慢的连接，图像会在一段时间后出现。

我可以预加载图像以避免用户单击td时的等待时间 吗？

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

请给出一些想法，我该如何实现它。

4

2 回答 2

0

这可以使用一些 javascript 函数来完成。引用另一个问题。

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 预加载器如何工作（不同的问题）

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

所以在你的情况下，你应该使用类似的东西

$(function() {
    // Do stuff when DOM is ready
    preload([
        'img/bg1.jpg',
        'img/bg2.jpg',
        'img/bg3.jpg'
    ]);
});
于 2011-12-08T08:12:01.643 回答
0

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

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

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

于 2011-12-08T08:16:27.930 回答