背景图像没有正确淡入

Question

我一直在为一个单页网站制作加载屏幕，加载屏幕只不过是一个自行绘制的 svg 徽标，效果非常好，但是一旦 'loading' 完成，我淡出加载屏幕并淡入网站内容。

它工作正常，除了以下事实：当内容淡入时，由于背景图像，它真的很糟糕，我知道这不是背景图像加载本身，因为存在加载屏幕的全部原因完全是为了让网站有时间加载所有图像，所以出于某种原因淡入不能正常工作..也许这是我设置所有动画的方式，看看：（我使用 jquery 和 animate.css 作为淡入淡出）

JQuery: 设置超时（功能（）{ $("#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");
});

在这种情况下，您不需要手动淡入页面内容。一旦页面加载了所有内容并且 window 准备就绪，您的加载屏幕将自动淡出并且您的页面将对用户可见。您页面的背景图片看起来也不错，因为它已经加载到屏幕上了。

您可以Click here了解更多详情。

试试这个方法，希望这能帮助您解决问题。

背景图像没有正确淡入

background-image not fading in properly

javascript

jquery

html

css

animate.css