Как обновить изображение в слайдере, когда я меняю изображение с тем же именем

Question

У меня есть такой слайдер в моем html

<div class="row">
        <div class="col-12 swiper-container swiper1">

            <div class="swiper-wrapper">    
                <div class="swiper-slide">
                    <a href="produk/koleksi-jam"><img class="live1"></a>
                </div>


            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination1"></div>
        </div>  
    </div>

Я использую слайдер swiper для загрузки изображения и ресурса изображения, которые я сохраняю в css с именем класса live1

иногда у меня естьчтобы изменить изображение на новое изображение

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

но у меня есть проблема, браузер иногда должен сначала нажать Ctrl + F5, чтобы обновить дисплей, если изображение не всегда использует предыдущие активы.

вопрос в том, как я могу немедленно изменить изображение без Ctrl +f5 первым увидеть новое изображение?

Answer 1

Вы не можете.Вы всегда должны использовать Control + F5, если хотите игнорировать кеш.Другой способ - удалить его вручную из браузера.

Добро пожаловать в Интернет.

Answer 2

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

Вот варианты, которые вы можете выбрать:

(1) Добавить уникальный параметр запроса к кешу в URL изображения,

, таких как:

newImage.src = "image.jpg? T =" + new Date (). GetTime ();

Плюсы : 100% надежность, быстрота и простота понимания и реализации.

Минусы : обходит кэширование в целом, что означает ненужные задержки и использование полосы пропускания всякий раз, когда изображение не меняется между видами. Потенциально заполнит кэш браузера (и любые промежуточные кеши) множеством копий одного и того же изображения! Также требуется изменить URL изображения.

Когда использовать : Используйте, когда изображение постоянно меняется, например, для прямой трансляции с веб-камеры. Если вы используете этот метод, убедитесь, что сами изображения обслуживаются с помощью Cache-control: HTTP-заголовки без кэширования !!! (Часто это можно настроить с помощью файла .htaccess). В противном случае вы будете постепенно заполнять кеши старыми версиями образа!

(2) Или вы можете предотвратить кэширование:

Чтобы отключить кеширование, вы можете отправить следующий заголовок ответа. Кроме того, см. Также заголовки Expires и Pragma.

Cache-Control: нет магазина

Надеюсь, что это работает!