Как вы кэшируете изображение в Javascript

как сказал @Pointy, вы не кэшируете изображения с помощью javascript, браузер делает это. так что это может быть то, что вы просите, а может и не быть... но вы можете предварительно загрузить изображения с помощью JavaScript. Помещая все изображения, которые вы хотите предварительно загрузить в массив, и помещая все изображения в этот массив в скрытые элементы img, вы эффективно предварительно загружаете (или кэшируете) изображения.

var images = [
'/path/to/image1.png',
'/path/to/image2.png'
];

$(images).each(function() {
var image = $('<img />').attr('src', this);
});

есть несколько вещей, которые вы можете посмотреть на:

предварительная загрузка изображений
Установка времени в кэше .htaccess file
Размер файла изображений и base64 их кодирование.

предварительная загрузка: http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

кэширование: http://www.askapache.com/htaccess/speed-up-sites-with-htaccess-caching.html

есть несколько разных мыслей для base64 кодирование, некоторые говорят, что http-запросы болото вниз пропускной способности, в то время как другие говорят, что "воспринимается" загрузка лучше. Я оставлю это в воздухе.

У меня есть аналогичный ответ для асинхронной предварительной загрузки изображений через JS. Их динамическая загрузка-это то же самое, что и обычная загрузка. они будут кэшировать.

Что касается кэширования, вы не можете управлять браузером, но вы можете установить его через сервер. если вам нужно загрузить свежий ресурсов по требованию, вы можете использовать cache buster technique для принудительной загрузки свежего ресурса.

даже если ваш вопрос говорит "с помощью javascript", вы можете использовать prefetch атрибут тега ссылки для предварительной загрузки любого актива. На момент написания этой статьи (10 августа 2016 года) он не поддерживается в Safari, но почти везде:

<link rel="prefetch" href="(url)">

дополнительная информация о поддержке здесь: http://caniuse.com/#search=prefetch

обратите внимание, что IE 9,10 не перечислены в caniuse матрицы, потому что Microsoft прекратила поддержку для них.

Так если вы действительно застряли на использовании javascript, вы можете использовать jquery для динамического добавления этих элементов на свою страницу; -)

Я использую аналогичную технику для lazyload изображений, но не могу не заметить, что Javascript не получает доступ к кэшу браузера при первой загрузке.

мой пример:

У меня есть вращающийся баннер на моей домашней странице с 4 изображениями слайдер ждет 2 секунды, чем javascript загружает следующее изображение, ждет 2 секунды и т. д.

эти изображения имеют уникальные URL-адреса, которые меняются всякий раз, когда я их изменяю, поэтому они получают заголовки кэширования, которые будут кэшироваться в браузере для год.

max-age: 31536000, public

теперь, когда я открываю Chrome Devtools и убедитесь, что опция de 'Disable cache' не активна и загружает страницу в первый раз (после очистки кэша), все изображения получают выборку и имеют статус 200. После полного цикла всех изображений в баннере сетевые запросы останавливаются и используются кэшированные изображения.

теперь, когда я делаю регулярное обновление или перейти на подстраницу и нажмите кнопку назад, изображения, которые находятся в кэше, кажется, игнорируются. Я бы ожидать, чтобы увидеть серое сообщение "из дискового кэша" на вкладке Сеть Chrome devtools. Вместо этого я вижу, что запросы проходят каждые две секунды с зеленым кругом состояния вместо Серого, я вижу, что данные передаются, поэтому у меня создается впечатление, что кэш вообще не доступен из javascript. Он просто извлекает изображение каждый раз, когда страница загружается.

таким образом, каждый запрос на домашнюю страницу запускает 4 запроса независимо от политики кэширования изображения.

учитывая вышесказанное вместе и новый стандарт http2 большинство веб-серверов и браузеров теперь поддерживают, я думаю, что лучше прекратить использовать lazyloading, так как http2 будет загружать все изображения почти одновременно.

Если это ошибка в Chrome Devtools, это действительно удивляет, что никто этого еще не заметил. ;)

Если это верно, использование lazyloading только увеличивает использование полосы пропускания.

пожалуйста, поправьте меня, если я ошибаюсь. :)

да, браузер автоматически кэширует изображения для вас.

однако вы можете установить срок действия кэша изображений. Проверьте это переполнение стека вопросы и ответы:

Срок Действия Кэша На Статических Изображениях

Я всегда предпочитаю использовать пример, упомянутый в Konva JS: события изображения для загрузки изображений.

1. вы должны иметь список URL-адресов изображений в качестве объекта или массива, например:

   var sources = { lion: '/assets/lion.png', monkey: '/assets/monkey.png' };

2. определите определение функции, где он получает список URL-адресов изображений и функцию обратного вызова в своем списке аргументов, поэтому, когда он закончит загрузку изображения, вы можете начать excution в своем интернете страница:

    function loadImages(sources, callback) {
                var images = {};
                var loadedImages = 0;
                var numImages = 0;
                for (var src in sources) {
                    numImages++;
                }
                for (var src in sources) {
                    images[src] = new Image();
                    images[src].onload = function () {
                        if (++loadedImages >= numImages) {
                            callback(images);
                        }
                    };
                    images[src].src = sources[src];
                }
            }

1. наконец, вам нужно вызвать функцию. Вы можете вызвать его, например, из jQuery ' s Документ

$(document).ready(function (){ loadImages(sources, buildStage); });