Javascript 如何使浏览器等待页面显示，直到它'；满了吗？_Javascript_Css_Web

Javascript 如何使浏览器等待页面显示，直到它'；满了吗？

javascript css web

Javascript 如何使浏览器等待页面显示，直到它'；满了吗？,javascript,css,web,Javascript,Css,Web,我讨厌你怎么能看到网页加载。我认为等待页面完全加载并准备好显示（包括所有脚本和图像），然后让浏览器显示它会更有吸引力。所以我有两个问题我该怎么做我完全不懂网络开发，但这是常见的做法吗？若否，原因为何提前感谢您的智慧我认为这是一个非常糟糕的主意。用户喜欢看到简单明了的进展。将页面保持在一种状态几秒钟，然后立即显示加载的页面会让用户感觉什么都没有发生，您可能会失去访问一个选项是在后台处理stuff时在页面上显示加载状态，但这通常是为站点实际处理用户输入时保留的底线是，在加载页面时，您至

我讨厌你怎么能看到网页加载。我认为等待页面完全加载并准备好显示（包括所有脚本和图像），然后让浏览器显示它会更有吸引力。所以我有两个问题

我该怎么做

我完全不懂网络开发，但这是常见的做法吗？若否，原因为何

提前感谢您的智慧

我认为这是一个非常糟糕的主意。用户喜欢看到简单明了的进展。将页面保持在一种状态几秒钟，然后立即显示加载的页面会让用户感觉什么都没有发生，您可能会失去访问

一个选项是在后台处理stuff时在页面上显示加载状态，但这通常是为站点实际处理用户输入时保留的

底线是，在加载页面时，您至少需要显示一些视觉活动，我认为一次加载一小块页面并不是那么糟糕（假设您没有做严重减慢页面加载时间的事情）。

必须：“使用jQuery”

我见过一些页面，它们在页面顶部放置一个黑色或白色div，覆盖所有内容，然后在document.load事件中将其删除。或者您可以使用.ready in jQuery也就是说，这是我见过的最有吸引力的网页之一，我建议不要使用它

您可以使用一些css隐藏所有内容：

#some_div
{
  display: none;
}

然后在javascript中为document.onload分配一个函数以删除该div

jQuery使这类事情变得非常简单。

尽管这并不总是一个好主意，但您可以自由决定是否真的要这样做。有几种不同的方法，我在这里找到了一个简单的例子：

可能不是最好的，但它应该可以帮助您开发自己的解决方案。祝你好运。

你可以先让网站的主索引页只包含一条“正在加载”的消息。从这里，您可以使用ajax获取下一页的内容，并在完成删除“加载”消息后将其嵌入当前页

您可能只需要在页面顶部包含一个100%宽/高的加载消息容器，然后在加载完成时删除所述div就可以了

后者可能无法在这两种情况下都很好地工作，这取决于浏览器呈现内容的方式

我不完全确定这是否是个好主意。对于简单的静态站点，我不这么认为。然而，我最近从设计公司那里看到了很多重javascript站点，它们使用复杂的动画，并且只有一个页面。这些网站使用加载消息来等待所有脚本/html/css加载，以便页面按预期运行。

虽然我同意其他人的观点，即您不应该想要它，但我将简要说明您可以做些什么，在不完全阻止已有内容的情况下，实现微小的差异——也许这会实现足够让你和你的访客都开心

浏览器开始加载页面，稍后将处理外部定位的css和js，特别是当css/js链接的位置在“正确”位置时。（我认为建议是尽可能晚地加载js，并使用您在标题中加载的外部css）。现在，如果您希望尽快应用css和/或js的某些部分，只需将其包含在页面本身中即可。这将违背诸如YSlow之类的性能工具的建议，但它可能会增加页面显示的变化，就像您希望的那样。只有在真正需要的时候才使用

这肯定有一个有效的用途。一种是防止人们点击链接/导致JavaScript事件发生，直到所有页面元素和JavaScript都加载完毕

在IE中，您可以使用页面转换，这意味着页面在完全加载之前不会显示：

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

请注意持续时间很短。这足以确保页面在完全加载之前不会显示

在FireFox和其他浏览器中，我使用的解决方案是创建一个与页面大小相同的DIV，然后在页面的最后放入JavaScript隐藏它。另一种方法是使用jQuery并隐藏它。不像IE解决方案那样无痛，但两者都能很好地工作。

这是一个非常糟糕的主意，原因很多。也就是说，以下是您如何使用：


正在加载，请稍候。。。
$（文档）.ready（函数（）{
$（'#body'）.show（）；
$（'#msg'）.hide（）；
});

如果用户禁用了JavaScript，他们将永远看不到该页面。如果页面从未完成加载，他们将永远看不到该页面。如果加载页面花费的时间太长，他们可能会认为出现了问题，只是转到其他地方，而不是“请稍候…”。

还要确保服务器缓冲页面，并且不会立即（在构建时）将其流式传输到客户端浏览器

由于您尚未指定技术堆栈：

PHP：调查
ASP.NET：确保Response.BufferOutput=True（默认为）

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

 <style> body  {opacity:0;}</style>

body{opacity:0；}

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>


window.onload=function（）{setTimeout（function（）{document.body.style.opacity=“100”}，500）；}；

 <style> body  {opacity:0;}</style>

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

<html class="no-js">

    <head>...</head>

    <body>

        <header>...</header>

        <main>...</main>

        <footer>...</footer>

    </body>

</html>

//at the beginning of the page

    .js main, .js footer{

        opacity:0;

    }

//at the beginning of the page before loading jquery

    var h = document.querySelector("html");

    h.className += ' ' + 'js';

    h.className = h.className.replace(
    new RegExp('( |^)' + 'no-js' + '( |$)', 'g'), ' ').trim();

//somewhere at the end of the page after loading jquery

        $(window).load(function() {

            $('main').css('opacity',1);
            $('footer').css('opacity',1);

        });

    <?php
        ob_start();
        // Your PHP codes here            
        ?>
        YOUR HTML HERE


        <?php 
        $html_output = ob_get_contents();
        ob_end_clean();
        echo $html_output;
    ?>

 <html>  
    <head>
        <style type="text/css">
          .js #flash {display: none;}
        </style>
        <script type="text/javascript">
          document.documentElement.className = 'js';
        </script>
      </head>
      <body>
        <!-- the rest of your code goes here -->

        <script type="text/javascript" src="/scripts/jquery.js"></script>
        <script type="text/javascript">
          // Stuff to do as soon as the body finishes loading.
          // No need for $(document).ready() here.
        </script>
      </body>
    </html>