如何让浏览器等待在完全加载之前显示页面？

问题描述：

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

我该怎么做？
我是一个网页开发总noobot，但这是常见的做法？如果不是，为什么？

在此先感谢您的智慧！

+41

我不喜欢怎样，直到一切都被加载某些页面不显示任何东西。不要错误地认为用户的想法和你一样。 – 2009-09-16 19:34:06

Facebook做到了这一点，它只是让我生气。 – 2009-09-16 19:36:29

如果你这样做，至少确保你立即显示一条消息说网页正在加载.. – 2009-09-16 19:37:22

答

我认为这是一个非常糟糕的主意。用户喜欢看到进步，简单明了。将页面保持在一个状态几秒钟，然后立即显示已加载的页面将使用户觉得没有任何事情发生，并且您可能会失去访问。

一种选择是在页面上显示加载状态，而在后台进行处理，但这通常是在网站实际上正在处理用户输入时保留的。

http://www.webdeveloper.com/forum/showthread.php?t=180958

底线，你至少需要展示，而页面加载一些视觉上的活动，我想在一个时间具有小件页面加载速度是不是所有的坏（假设你AREN做的事情会严重减慢页面加载时间）。

我设计了一个网站，使用轻量级的微调器，而沉重的东西正在加载 - 沉重的东西被设置为“display：none”。一旦所有东西都加载完毕，微调器就会淡出，内容就会消失。它现在可以很好地工作，因为微调器现在被普遍理解为*“loading，Please wait”*。注意：它使用jQuery。 – ADTC 2015-08-29 17:55:56

答

强制性的：“使用jQuery”

我已经看到了把黑色或白色的div覆盖在页面顶部的一切网页，然后将其删除的document.load事件。或者你可以在jQuery中使用.ready 这就是说，它是我见过的最厌烦的网页之一，我会建议反对它。

答

可以使用一些CSS隐藏一切：

#some_div 
{ 
    display: none; 
}

，然后在JavaScript中一个函数分配给document.onload删除该分区。

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

当然，如果用户没有JavaScript，他们将永远不会看到你的页面。 – 2009-09-16 19:42:26

我恳求你的赦免，刺激！ – MiseryIndex 2009-12-25 19:38:03

答

虽然这并不总是一个好主意，但您可以自由决定是否真的想这样做。有一些不同的方法来做到这一点，我发现了一个简单的例子在这里：

http://www.reconn.us/content/view/37/47/

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

答

你可以先让你的网站的主索引页面只包含一条消息说“加载”。从这里开始，您可以使用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)" />

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

在火狐和其他浏览器，我使用的解决方案是创建一个DIV是页面和白色的大小，然后在把JavaScript中隐藏在页面的最末端。另一种方法是使用jQuery并隐藏它。不像IE解决方案那样无痛苦，但都工作得很好。

对于Firefox解决方案：禁用JavaScript的用户呢？ – ChristopheD 2009-09-16 19:57:39

@ChristopheD答案：那些关闭javascript的世界上的10个人将无法看到该页面。 – bagofmilk 2013-10-11 14:44:14

@ChristopheD似乎很多东西都依赖于JS，所以[至少对于我的网站]它无法正常工作。 – 2014-02-15 21:50:09

答

这是对所有的给出的理由，多一个非常糟糕的主意。这就是说，这里是它的使用jQuery你怎么做：

<body> 
<div id="msg" style="font-size:largest;"> 
<!-- you can set whatever style you want on this --> 
Loading, please wait... 
</div> 
<div id="body" style="display:none;"> 
<!-- everything else --> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#body').show(); 
    $('#msg').hide(); 
}); 
</script> 
</body>

如果用户禁用了JavaScript，他们从来没有看到的网页。如果页面从未完成加载，他们将永远不会看到该页面。如果页面加载时间过长，他们可能会认为出现了问题，然后转到其他地方而不是*请等待... *。

解决这个解决方案的no javascript问题的一种方法是使用'

2011-01-30 19:28:54

答

此外，请确保服务器缓冲页面，并且不要立即（建设中）将其流到客户端浏览器。

既然你没有指定你的技术堆栈：

PHP：看看ob_start
ASP.NET：确保响应。BufferOutput = TRUE（这是默认设置）

一个服务器端的方法！优秀！谢谢！ – BeachRunnerFred 2009-09-16 19:57:14

请注意，虽然这将有助于发送巨大的动态构建的html页面，但这对于“外部”链接的图像和脚本/样式表不起作用（但这些将在第一页加载之后在浏览器缓存中） – ChristopheD 2009-09-16 20:01:34

答

下面是使用jQuery的解决方案：

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

我把这个脚本只是我</body>标记之后。只需将“#container”替换为要隐藏的DOM元素的选择器即可。我尝试了几个变体（包括.hide()/.show()和.fadeOut()/.fadeIn()），只是设置不透明度似乎有最少的不良影响（闪烁，改变页面高度等）。您也可以用fadeTo(100, 1)代替css('opacity', 0)以获得更平滑的过渡。（不，fadeIn()将不会工作，至少不会在jQuery 1.3.2下工作。）

现在的注意事项：我实现了上述，因为我使用的是TypeKit，当刷新页面和字体时会出现烦人的闪烁需要几百毫秒才能加载。所以我不想在TypeKit加载之前在屏幕上出现任何文本。但是，如果您使用上面的代码并且页面上的某些内容无法加载，那么显然您遇到了麻烦。有两个明显的方式，它可以改进：

最大时间限制（比如，1秒）之后，一切都将出现在页面是否加载与否
某种类型的负荷指标（比如，东西from http://www.ajaxload.info/）

我不会在这里实施加载指示器，但时间限制很容易。只需将其添加到上面的脚本中：

$(document).ready(function() { 
    setTimeout('$("#container").css("opacity", 1)', 1000); 
});

所以现在，最坏的情况下，您的页面将需要多出一秒。

除了方法我刚刚发布了一个答案来处理禁用JavaScript和推迟CSS加载。谢谢Trevor。 – RafaSashi 2015-02-19 09:47:24

答

紧随你的< body>标签中添加这样的事情...

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

并为您的<头的第一件事>添加类似...

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

由于这是好的做法还是坏的取决于你的访问者，以及等待的时间。

这个问题仍然存在，我没有看到任何答案是如何确保页面已经稳定。例如，如果您要加载字体，则页面可能会重新排列一点，直到加载并显示所有字体。我想知道是否有事件告诉我该页面已完成渲染。

答

我知道这是一个古老的线程，但仍然。另一个简单的选择是这个库：http://gayadesign.com/scripts/queryLoader2/

答

不要使用显示：无。如果你这样做，当你做show（）时你会看到图像的大小调整/重新定位。使用可见性：隐藏，而不是正确放置所有东西，但它只是直到你告诉它才会显示。

答

除了特雷弗Burnham的答案，如果你想处理disabled javascript和defer css loading

HTML5

<html class="no-js"> 

    <head>...</head> 

    <body> 

     <header>...</header> 

     <main>...</main> 

     <footer>...</footer> 

    </body> 

</html>

CSS

//at the beginning of the page 

    .js main, .js footer{ 

     opacity:0; 

    }

JAVASCRIPT

//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();

JQUERY

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

     $(window).load(function() { 

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

     });

资源

CSS delivery optimization: How to defer css loading?
What is the purpose of the HTML "no-js" class?
How to get the <html> tag HTML with JavaScript/jQuery?
How to add/remove a class in JavaScript?

答

在PHP-Fusion技术的开源CMS，http://www.php-fusion.co.uk，我们做这样的核心 -

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


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

您将无法看到一个接一个地加载。唯一的加载程序将是您的浏览器选项卡微调器，并且它在加载完所有内容后立即显示所有内容。试一试。

此方法完全符合html文件。

答

希望这个代码将有助于

<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>

请描述此代码如何可能有所帮助。 – 2017-07-30 07:55:28

如何让浏览器等待在完全加载之前显示页面？

相关推荐