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

Question

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

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

请评论.

关心Himanshu Sharma

Answer 1

您可以预加载将导致它们位于缓存中的图像,以便它们可以立即用于鼠标事件.有关预先缓存图像数组的示例代码,请参阅此文章.

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);