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

Sam*_*Sam 9 html jquery loading hide

我只是编写了一个简单的代码来隐藏所有元素,直到页面完成加载并在加载时显示一个指示符..(它的工作原理).

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

HTML

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

    <div class="content">
        <!-- page content goes here --> 
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

jQuery的

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

    $(window).load(function(){
        $(".loading").fadeOut("slow");
        $(".content").fadeIn("slow");
     });
Run Code Online (Sandbox Code Playgroud)

njr*_*101 14

您可能希望从一开始就隐藏内容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");
});
Run Code Online (Sandbox Code Playgroud)


nid*_*dal 6

这个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");
  });
});
Run Code Online (Sandbox Code Playgroud)