Можно ли вставить изображения в кеш перед рендерингом?

Question

У меня есть эта веб-страница, которая показывает мне некоторые изображения, а некоторые из них находятся при наведении мыши, и поэтому для их отображения требуется время. Я обошел его, поместив изображение при наведении курсора мыши и скрыв его с помощью свойства display none, которое помещает их в кеш браузера и быстро отображает их при наведении мыши. Я думал, что возможно вставить изображения в кэш браузера другим способом используя jQuery или что-то еще, поэтому мне не нужно помещать изображения в скрытом виде.

Я не знаю, если это глупый вопрос.

Пожалуйста, прокомментируйте.

С уважением Химаншу Шарма

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

Answer 2

Вы можете просто использовать (new Image).src="http://path/to/img.jpg", что заставит браузер загрузить его

Answer 3

Прежде всего, используйте спрайты для маленьких и / или наведенных мышью изображений. Также, да, вы можете предварительно загружать изображения с помощью javascript, но помните о последовательности загрузки страницы, поэтому она может быть не быстрее, чем css.