Vue lazyloading запускается при добавлении класса Dynami c в <main>

Question

Я добавляю класс «sticky-header» к моему динамически, но когда он становится «липким», мне, очевидно, также необходимо добавить отступы к моему, чтобы содержимое не было go за заголовком.

Проблема в том, что что при добавлении отступа через связывание классов (v-bind:class="{'fixed-header': stickyHeader}") при прокрутке это перезагружает все загруженные с отложенной загрузкой изображения (которые загружаются с отложенной загрузкой с использованием vue отложенная загрузка)

Это делает все изображения go из loading до loaded за доли секунды, но это очень заметно.

stickyHeader - это логическое значение, которое пересчитывается при прокрутке, если окно прокручивается после определенного элемента (с помощью списка событий на прокрутке: checkHeader())

 checkHeader() {
            var elementTarget = document.getElementById("notice");

             if(window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)){
                 this.stickyHeader = true;
             }
            else{
                this.stickyHeader = false;
            }
        }

Кто-нибудь знает, что именно вызывает изображения к go назад к «загрузке» на долю секунды?

Answer 1

Чтобы решить эту проблему вместо динамического связывания класса с v-bind, я просто добавляю его в метод прослушивания прокрутки с помощью basi c javascript, теперь он не перерисовывается :)!