背景圖像無法正常消失

Question

我一直在為一頁網站制作加載屏幕，加載屏幕無非是一個svg徽標，它本身可以很好地繪制出來，但是一旦完成“加載”，我就會淡出加載屏幕並逐漸消失在網站的內容中。

效果很好，除了以下事實：當內容褪色時，由於背景圖像而造成的震撼非常嚴重，我知道這不是背景圖像加載本身，因為根本就沒有加載屏幕的整個原因是網站加載所有圖像的時間，因此由於某種原因，fadein無法正常工作。.也許這是我設置所有動畫的方式，請看一下：（我使用jquery和animate.css進行淡化）

jQuery：setTimeout（function（）{$（“＃Builds”）。children（）。addClass（“ animatedLogo”）;

  setTimeout(function() {

    $(".loadingLogo").addClass("fadeOut");

    setTimeout(function() {

      $(".loadingScreen").addClass("fadeOut");

      setTimeout(function() {

        $(".loadingScreen").css('display', 'none');

        setTimeout(function() {

          $("body").css('overflow-y', 'auto');

          $(".contentWrapper").addClass("fadeIn").show();
          $("header").addClass("fadeIn").show();

          setTimeout(function() {

            $("body").css('background-color', "#fff");

          }, 500)
        }, 500)
      }, 500)
    }, 500)
  }, 3400)

HTML：

 <div class="loadingScreen animated">
        <div class="loadingLogo animated">
            <svg>
              //svg logo
            </svg>
        </div>
    </div>

 <div class="contentWrapper animated">
       @yield('content')
 </div>

所以我幾乎已經知道我執行此操作的方式有問題，也許這樣做會增加性能？ 非常感謝任何有關如何以不同方式執行此操作的建議！ 謝謝！

Answer 1

當您要顯示加載屏幕直到頁面內容加載時，可以用以下代碼替換現有代碼：

的HTML

<div class="se-pre-con"></div>

的CSS

.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

注意：在此CSS中更改背景URL。 將其替換為您的svg文件，該文件將顯示為加載圖像。

的JavaScript

$(window).load(function() {
    // Animate loader off screen
    $(".se-pre-con").fadeOut("slow");
});

在這種情況下，您無需手動淡入頁面內容。 頁面加載完所有內容並准備好窗口后，您的加載屏幕將自動消失，您的頁面將對用戶可見。 頁面的背景圖像也不會看起來很糟，因為它已經被加載到了屏幕上。

您可以單擊此處以獲取更多詳細信息。

嘗試這種方法，並希望這將幫助您解決問題。