javascript - SVG 文件在应用 css 样式之前在页面加载时闪烁

Question

我在页面上有一个 svg 箭头图标，用于进行页面跳转以降低页面。问题是在页面加载时，svg 在整个屏幕上快速闪烁(如全高和全宽)，然后转到正确的大小和位置。我希望有人能够帮助我删除它或降低它的显着性。我试着最初把 display: none;在它上面，然后在 0.25 秒后使用 javascript 删除该类，但它没有解决问题。 Link to page here

HTML:

<div class="intro-foot">

                    <a href="#section-services" class="smooth-scroll delay-load">
                                             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.57 80" class="smooth-scroll-arrow"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 6</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M28.28,4V66.34L6.83,44.89a4,4,0,1,0-5.66,5.66L29.46,78.83h0a4,4,0,0,0,.61.5c.1.07.21.11.31.17a3.86,3.86,0,0,0,.37.2,3.65,3.65,0,0,0,.41.13c.11,0,.22.08.33.1a4,4,0,0,0,.79.08h0a4,4,0,0,0,.77-.08c.12,0,.23-.07.35-.1a3.58,3.58,0,0,0,.4-.12,4,4,0,0,0,.4-.21c.1-.05.2-.1.29-.16a3.88,3.88,0,0,0,.61-.5L63.39,50.54a4,4,0,1,0-5.66-5.66L36.28,66.34V4a4,4,0,0,0-8,0Z"/></g></g></svg>
                    </a>
</div>

CSS:

.delay-load {display: none !important;}

.smooth-scroll-arrow {
   margin-bottom: 70px;
   height: 30px;
   width: 30px;
   padding: 0px;
}

.intro-foot {
   -webkit-animation:bounce 2s infinite;
}

@-webkit-keyframes intro-foot {
  0%       { bottom:5px; }
  25%, 75% { bottom:15px; }
  50%      { bottom:20px; }
  100%     {bottom:0;}
}

jQuery:

var $post = $(".smooth-scroll");
setTimeout(function(){
    $post.removeClass("delay-load");
}, 250);

Answer 1

这里可能存在一些问题，但让我们先解决最容易实现的问题。 我要做的第一件事是删除 CarouFredsel 代码，因为它似乎不是必需的(轮播中只有一个元素？)。这肯定会影响布局的大小。在你这样做之后，再次测试并查看它是否已修复。