Question

我有这个网页向我展示一些图像，一些图像在鼠标悬停事件上，因此它们需要时间来显示。我已经通过放置鼠标悬停图像并通过display none属性隐藏它们，将它们放入浏览器缓存并在鼠标悬停时快速显示它。我认为可以通过其他方式将图像插入浏览器的缓存中使用jQuery或其他东西，所以我不必把图像放在隐藏的形式。

我不知道这是不是一个愚蠢的问题。

请评论。

此致 Himanshu Sharma

Answer 1

您可以预加载图像，这些图像将使它们位于缓存中，以便它们可以立即用于鼠标事件。有关预先缓存图像数组的示例代码，请参阅this post。

function preloadImages(srcs) {
    if (!preloadImages.cache) {
        preloadImages.cache = [];
    }
    var img;
    for (var i = 0; i < srcs.length; i++) {
        img = new Image();
        img.src = srcs[i];
        preloadImages.cache.push(img);
    }
}

// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];

preloadImages(imageSrcs);

Answer 2

您可以使用(new Image).src="http://path/to/img.jpg"，这将使浏览器加载

Answer 3

首先，将精灵用于小型和/或“鼠标悬停”图像。此外，是的，您可以使用javascript预加载图片，但请记住页面加载顺序，因此它可能不会比css快。

是否可以在渲染之前在缓存中插入图像

3 个答案: