Как отключить прелоадер?

Question

[nata32]

Добрый вечер, есть ссылка для перехода по onclick

<div class="id-variant<?php echo $selection['selected'] ? ' id-variant-selected' : ''; ?>" onclick="location.href='<?php echo $selection['href']; ?>'">
    <span><?php echo $selection['name']; ?></span>
                      </div>

код который запускает прелоадер при клике

<style type="text/css">
                    .product-variant-blocker {
                    position: fixed;
                    top: 90;
                    left: 0;
                    z-index: 999999;
                    height: 100%;
                    width: 100%;
                    text-align: center;
                    background: rgba(0, 0, 0, 0.5);
                }
                .product-variant-blocker i {
                    font-size: 120px;
                    color: #ffffff;
                    margin-top: 390px;
                }
</style>
 <script type="text/javascript">
                $(document).ready(function() {
                    $('.id-variant').click(function() {
                $('body').prepend('<div class="product-variant-blocker"><i class="fa fa-spinner fa-spin"></i>');
         });
    });
</script>

все работает нормально, но если в браузере нажать на возврат на предыдущею страницу, то запускается прелоадер и все виснет. Как решить эту проблему ? Почему запускается прелоадер, ведь насколько я понимаю, он должен запуститься при клике где есть id-variant ? Спасибо.

Answer 1

[Пума Тайланд]

похоже это bfcache, а не баг в твоём click. Браузер при возврате назад восстанавливает страницу ровно в том виде, в каком её оставил — а у тебя onclick сначала лепит .product-variant-blocker в DOM и только потом дёргает location.href. То есть блокер уже висел в разметке в момент ухода со страницы, и назад ты возвращаешься с ним же, а js по новой не выполняется. Сноси его на pageshow с event.persisted:

window.addEventListener('pageshow', e => { if (e.persisted) document.querySelector('.product-variant-blocker')?.remove(); });