Question

使用jquery实现页面加载/ loading.gif的最简单方法是什么，就像任何其他网站一样..它需要在页面中显示白色并在其中间显示loading.gif，直到页面加载为止。我不想在页面的中间写下它所以它甚至没有目的，我希望这能加载页面上的第一件事。有没有办法我可以做到这一点，而无需在该页面上写静态div ？最好是一个.js文件，它可以在没有任何写入div / etc的情况下完成所有操作吗？

Answer 1

如果您的意思是当您的访问者首次加载某个页面时，您只能获得一个spinny图标，直到该页面准备就绪？

我要做的是将DIV放在页面顶部，加载GIF，另一个放置在页面内容的另一个div上，显示：none，包含页面的主体。

<body>
  <div class='loadDiv'>
    <img src='spinner.gif' class='spinner_gif' />
  </div>
  <div class='mainContent' style='display:none;'>
    <p> stuff!</p>
  </div>
</body>

然后在你的DOM加载事件中：

$(document).ready(function() {
    $('.loadDiv').hide();
    $('.mainContent').show();
});

这将强制您的加载div显示，直到DOM确认页面已准备就绪。

Answer 2

这是一种可能性。

   window.onload = normalize;
   var laoding_img = $('<img src="loading.gif" />');
   $('body').children(':first').css('display', 'none'); //has to be some container that holds all html

   function normalize() {
       loading_img.remove();
       $('body').children(':first').css('display', 'block');
   }

HTML中的

    <body>
        <script type="text/javascript">
             $('body').append(loading_img);</script>
    </body>

使用Jquery打开loading.gif

2 个答案: