【问题标题】:Javascript/Jquery/PHP Loading Page - How?Javascript/Jquery/PHP 加载页面 - 如何?
【发布时间】:2015-04-09 15:19:50
【问题描述】:

我有一个网站,它有很多元素并且加载速度很慢http://www.uberdice.com。我一直在寻找一种方法来拥有一个加载页面,该页面指定正在加载的页面,因为这比一个白页更令人愉悦。

一个理想的例子是http://primedice.com

我已经四处搜索,但建议的示例似乎都不起作用,或者我只是将它们放在错误的位置。

我创建了这个 div:

<div id="loading" style="width: 100%;
 height: 100%;
 background: black;
 background-attachment: fixed;
 background-position: top;
 background-size: 100% 100%;
 position: absolute;
 color: white;">Loading! Please calm down guy...</div> 

我将使用它作为加载页面和这个脚本来禁用它。

<script type="text/javascript">
document.getElementById("loading").style.display = "none";
</script>

但是,当我实施此操作时,它仍然给我一个白屏,并且在整个网站加载前几毫秒,我看到“正在加载” div 短暂闪烁。我不认为服务器很慢,因为 ping 正常,https://uberdice.com/test.php 加载很快。

谁能提供任何解决方案?

这是当前的 index.php 文件:

<div id="loading" style="width: 100%;
height: 100%;
background: black;
background-attachment: fixed;
background-position: top;
background-size: 100% 100%;
position: absolute;
color: white;">Loading! Please calm down guy...</div>
<?php

header('X-Frame-Options: DENY'); 

$init=true;
include './inc/start.php';
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $settings['title'].' - '.$settings['description']; ?></title>
<meta name="Keywords" content=“Dogecoin, Dice, Bets, Betting”>
<meta name="Description" content=“Exclusive Dogecoin Dice Site - 50% of ALL profits go back into Dogecoin development. In association with forum CryptoBoard.org.”>
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" type="text/css" href="themes/<?php echo $settings['activeTheme']; ?>/main.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content/ext/msgbox/Scripts/jquery.msgBox.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/msgbox/Styles/msgBoxLight.css">
<script type="text/javascript" src="content/ext/qtip/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/qtip/jquery.qtip.min.css">
<script type="text/javascript" src="js/colors.js"></script>    
<?php include './js/includer.php'; ?>
</head>
<body>
<?php include './themes/'.$settings['activeTheme'].'/frontpage.php'; ?>
<!-- _COINTOLI_IDENTIFIER_2_ -->
</body>
</html>
<?php include './inc/end.php'; ?>
<script type="text/javascript">
document.getElementById("loading").style.display = "none";
</script>

谢谢。

【问题讨论】:

标签: javascript php jquery html events


【解决方案1】:

问题在于服务器生成页面所需的时间,在服务器将内容发送给浏览器之前,浏览器无法显示任何内容。服务器在页面上生成内容大约需要 6 秒,这表明查询速度较慢。

您尝试使用的加载栏仅适用于页面上有大量您需要加载的对象,例如大量大图像。实际的 HTML 会快速发送到浏览器,但加载大图像是单独完成的,并且需要时间。但是你的问题不是这样的,页面的 HTML 需要很长时间才能生成,并且在生成完整页面之前,服务器不会向浏览器发送任何 HTML。

您可以尝试一些事情。首先是确定需要很长时间才能加载和优化它们的查询(我会先尝试一下)。第二种是只加载页面的框架,然后使用 Ajax 加载内容。

第三个是代替加载页面的所有内容,您可以在 HTML 准备好时将其一点一点地回显到浏览器。从页面加载方式来看,我假设您将所有内容存储到一个变量中,并且一旦一切就绪,将其回显到页面。这就像回显内容一样简单,然后在它准备就绪时继续逐位回显,而不是将其存储在变量中。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-08-09
  • 1970-01-01
  • 2019-10-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多