通过使用 jQuery 附加一个 div 创建了一个闪屏，但是

Question

我通过在页面加载上附加一个 div 使用 jQuery 制作了一个启动页面。 一段时间后，页面主体淡入，尽管附加的 div 仍然显示在页面末尾。 尝试在函数末尾添加 .remove() 以查看是否有帮助，但没有任何帮助。 我想让它在页面的其余部分加载时消失。 如果我以错误的方式解决这个问题，请告诉我。

https://swaybs.github.io/jdphotography/

      $(document).ready(function() {


    $('html').append('<h1 class="onLoad">loading...</h1>');


    /*! Fades in page on load */
    $('body').css('display', 'none');
    $('body').delay(4000).fadeIn(1000);
    $('html').remove('.onload');

Answer 1

您可以使用fadeIn()的complete回调函数来移除（或淡出加载消息）。

注意：与其隐藏body ，并将h1添加到html ，不如添加一个 use a main 元素（ div或main ），您可以隐藏/显示。

 $('html') .append('<h1 class="onLoad">loading...</h1>'); $('body').css('display', 'none') .delay(4000).fadeIn(1000, function() { $('.onLoad').fadeOut(1000); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> I'm part of the body

Answer 2

你需要在 CSS 上工作。 加载 div 应该有一个绝对定位（并且它的容器应该有一个相对定位），否则它总是会在其他元素出现时被下推。