SVG文件在應用css樣式之前在頁面加載時閃爍

我在頁面上有一個svg箭頭圖標，用於執行頁面跳轉以降低頁面上的內容。問題是，在頁面加載時，svg會在整個屏幕上快速閃爍（如完整的高度和寬度），然後轉到正確的大小和位置。我希望有人能夠幫助我解決這個問題或降低它的顯着性。我試圖最初把顯示：無;然後使用javascript在0.25秒後刪除該類，但它並未解決問題。 Link to page here SVG文件在應用css樣式之前在頁面加載時閃爍

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

來源

2017-04-11 S. Miller

有可能是這裏的幾個問題，但是首先解決唾手可得的成果。我要做的第一件事就是刪除CarouFredsel代碼，因爲它似乎不是必需的（轉盤中只有一個元素？）。這肯定會弄亂佈局的大小。在完成之後，再次測試並查看它是否已修復。

來源

2017-04-11 17:39:57 asonnenshine

這個工作適合你嗎？我很想知道。 – asonnenshine

SVG文件在應用css樣式之前在頁面加載時閃爍

回答

相關問題