时间戳

首页 > 解决方案 > 添加动态类时会触发Vue延迟加载

vue.js - 添加动态类时会触发Vue延迟加载

问题描述

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

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

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

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

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

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

任何人都知道究竟是什么触发图像回到“加载”一瞬间？

标签： vue.jslazy-loading

解决方案

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

推荐阅读