将动态类添加到 <main> 时触发 Vue 延迟加载答案

【问题标题】：Vue lazyloading gets triggered when adding dynamic class to <main>将动态类添加到 <main> 时触发 Vue 延迟加载
【发布时间】：2020-04-01 10:27:04
【问题描述】：

我正在动态添加一个“sticky-header”类，但是当它很粘时，我显然还需要向我添加填充，这样内容就不会放在标题后面。

问题是当通过 class-binding(v-bind:class="{'fixed-header': stickyHeader}")on 滚动添加填充时，这会重新加载所有延迟加载的图像（使用 vue lazy 延迟加载的图像）

这使得所有图像在瞬间从loading 变为loaded，但它非常引人注目。

stickyHeader是一个在滚动时重新计算的布尔值，如果窗口滚动超过某个元素（滚动时带有事件监听器：checkHeader()）

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

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

有谁知道究竟是什么触发了图像在一瞬间回到“加载”状态？

【问题讨论】：

你能添加一些代码吗？我的猜测是stickyHeader 是一个计算属性，当您计算应用此类时，您的组件可能会重新渲染。
@UtsavPatel 我已经添加了调用 onscroll 的代码，它确实是一个计算属性，但是为什么组件会重新渲染？
每当您的数据或道具发生变化时，计算属性都会运行。重新渲染意味着将最新的更改应用到 dom。
@UtsavPatel 对我来说动态添加一个类但不让它重新渲染的最佳方式是什么。还是那不可能？
@UtsavPatel 我找到了解决方案。我正在回答它

标签： vue.js lazy-loading

【解决方案1】：

为了解决这个问题，而不是使用v-bind 动态绑定类，我只需使用基本的 javascript 将它添加到滚动侦听器方法中，现在它不会重新呈现 :)！

【讨论】：