Question

我只是写了一个简单的代码来隐藏所有元素，直到页面加载完毕并在加载时显示一个指示符。（工作正常）。

所以我要求的是知道我做得对，你会建议什么。

HTML

<body>
    <div class="loading">
        <img src="indicator.gif"/>
    </div>

    <div class="content">
        <!-- page content goes here --> 
    </div>
</body>

jquery的

$(document).ready(function(){
        $(".content").hide();
     });

    $(window).load(function(){
        $(".loading").fadeOut("slow");
        $(".content").fadeIn("slow");
     });

Answer 1

您可能希望从一开始就隐藏内容div，以避免任何可能的页面闪烁，具体取决于页面上加载的内容。

<body>
  <div class="loading">
    <img src="indicator.gif"/>
  </div>

  <div class="content" style="display: none;">
    <!-- page content goes here --> 
  </div>
</body>


$(window).load(function(){
  $(".loading").fadeOut("slow");
  $(".content").fadeIn("slow");
});

Answer 2

这个Javascript略有改进，就是在淡出时使用回调，以便在淡出完成时开始淡入淡出。这为您提供了更平滑的过渡。

<body>
  <div class="loading">
    <img src="indicator.gif"/>
  </div>

  <div class="content" style="display: none;">
    <!-- page content goes here --> 
  </div>
</body>


$(window).load(function(){
  $(".loading").fadeOut("slow", function(){
    $(".content").fadeIn("slow");
  });
});

隐藏元素，直到页面完成加载 - 使用jquery

2 个答案: