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

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

Comments

[nata32]

Спасибо, работает !

Answer 2

[ilya0890067]

Проблема в том, что обработчик .click() срабатывает до перехода по onclick, поэтому сначала добавляется .product-variant-blocker, а затем браузер уходит на новую страницу.

Если нужно полностью отключить этот прелоадер, достаточно убрать или закомментировать этот JS:

$(document).ready(function() {
$('.id-variant').click(function() {
$('body').prepend('');
});
});

То есть оставить только твой HTML:


<?php echo $selection['name']; ?>


И CSS .product-variant-blocker тоже можно удалить.

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

$(document).ready(function() {
$('.id-variant').off('click');
});

Но если этот обработчик подключается именно показанным кодом, правильнее всего просто удалить весь блок $('.id-variant').click(...).

Если цель - оставить прелоадер, но чтобы он не мешал переходу по onclick, это тоже можно исправить.

Answer 3

[Anisimov_00589]

Добавь удаление оверлея при загрузке:
window.addEventListener('pageshow', function(){ document.querySelector('.product-variant-blocker')?.remove(); })