加载前页面显示空白

Question

I have the following code for a website that I'm working on. 我正在使用的网站具有以下代码。 It is for business use. 它用于商业用途。 The website is actually in PHP and the file is index.php as it exists on the server. 该网站实际上是PHP，并且文件是服务器上存在的index.php。 You may see the website at: www.tradingcharts.ca. 您可能会在以下网站上看到该网站：www.tradingcharts.ca。 So far the website works perfectly in terms of functionality. 到目前为止，该网站在功能方面完全可以正常运行。 There's still some functions to add such as saving form data to disk and data validation. 还有一些功能要添加，例如将表单数据保存到磁盘和数据验证。

My problem is that there's a noticeable delay for whenever the end-user loads the website. 我的问题是，最终用户每次加载网站都会有明显的延迟。 This delay also occurs when the end-user hits the submit button on the form to open an account or to log in an account. 当最终用户单击表单上的“提交”按钮以打开帐户或登录帐户时，也会发生此延迟。 The delay lasts for about a half a second where the screen turns to a blank white-space before the content is rendered. 延迟持续约半秒钟，在呈现内容之前，屏幕将变为空白。 The thing is though, this phenomenon doesn't occur when I have the website loaded on my personal computer where I'm using IIS; 事实是，当我在使用IIS的个人计算机上加载网站时，不会发生这种现象。 it only occurs when its uploaded to the off-site server. 仅当其上载到异地服务器时才会发生。 I am open to suggestions as to how to correct this problem. 我愿意就如何纠正此问题提出建议。 Please feel free to review the source code below: 请随时查看以下源代码：

 <!DOCTYPE html> <html> <head> </head> <body> <?php //echo $_POST["first_name"]; if (isset($_POST["selected_screen"])) { if ($_POST["selected_screen"] == "Open Account Submit") { $my_file = "customer_accounts.csv"; $handle = fopen($my_file, "a"); $data = $_POST["user_name"].",".$_POST["password"]."\\r\\n"; fwrite($handle, $data); fclose($handle); echo "<script>var selected_screen = \\"Open Account Submit\\";</script>"; } else if ($_POST["selected_screen"] == "Login Account Submit") { echo "<script>var selected_screen = \\"Login Account Submit\\";</script>"; } else if ($_POST["selected_screen"] == "Logout Account Submit") { echo "<script>var selected_screen = \\"Logout Account Submit\\";</script>"; } } else { echo "<script>var selected_screen = \\"Home\\";</script>"; } echo "<script> document.addEventListener(\\"DOMContentLoaded\\", function(event) { // alert(\\"DOM fully loaded and parsed\\"); }); function create_menu_button(text, left, top, width, height) { var button = document.createElement(\\"button\\"); button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: white; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; \\"); var textNode = document.createTextNode(text); button.appendChild(textNode); button.addEventListener(\\"mouseover\\", mouseOver); button.addEventListener(\\"mouseout\\", mouseOut); button.addEventListener(\\"mousedown\\", mouseDown); function mouseOver() { button.setAttribute(\\"style\\", \\"background-color: blue; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: white; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; \\"); } function mouseOut() { button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: white; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; \\"); } function mouseDown() { selected_screen = text; create_screen(); } document.body.appendChild(button); } function create_link_button(id, text, left, top, width, height) { var button = document.createElement(\\"button\\"); button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: white; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; \\"); var u = document.createElement(\\"u\\"); var textNode = document.createTextNode(text); u.appendChild(textNode); button.appendChild(u); button.addEventListener(\\"mouseover\\", mouseOver); button.addEventListener(\\"mouseout\\", mouseOut); button.addEventListener(\\"mousedown\\", mouseDown); function mouseOver() { button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: blue; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; \\"); } function mouseOut() { button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: white; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; \\"); } function mouseDown() { selected_screen = id; create_screen(); } return button; } function create_submit_button(id, text, left, top, width, height) { var button = document.createElement(\\"input\\"); button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: white; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; \\"); button.addEventListener(\\"mouseover\\", mouseOver); button.addEventListener(\\"mouseout\\", mouseOut); function mouseOver() { button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: blue; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; text-decoration:underline; \\"); } function mouseOut() { button.setAttribute(\\"style\\", \\"background-color: grey; position: absolute; left: \\" + left + \\"px; top: \\" + top + \\"px; width: \\" + width + \\"px; height: \\" + height + \\"px; \\" + \\"border-style: none; color: white; font-size: 12px; font-weight: bold; text-align: center; vertical-align: middle; padding: 0; text-decoration:underline; \\"); } button.type = \\"submit\\"; button.value = text; button.style.textDecoration = \\"underline\\"; return button; } function create_screen() { if (document.getElementById(\\"header\\") != null) document.getElementById(\\"header\\").remove(); if (document.getElementById(\\"main\\") != null) document.getElementById(\\"main\\").remove(); if (selected_screen == \\"Home\\") { var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Home\\"; document.body.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; document.body.appendChild(div); var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = \\"125px\\"; div2.style.fontSize = \\"12px\\"; div2.innerHTML = \\"Welcome to Trading Charts\\"; div.appendChild(div2); } else if (selected_screen == \\"Account Management\\") { var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Account Management\\"; document.body.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; document.body.appendChild(div); var button = create_link_button(\\"Open Account\\", \\"Open Account\\", 100, 100, 100, 20); div.appendChild(button); var button = create_link_button(\\"Login Account\\", \\"Login Account\\", 100, 150, 100, 20); div.appendChild(button); } else if (selected_screen == \\"Open Account\\") { var form = document.createElement(\\"form\\"); form.method = \\"post\\"; var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Open Account\\"; form.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; form.appendChild(div); var width = 500; var height = 35; var top = 20; var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = top + \\"px\\"; div.style.fontSize = \\"12px\\"; div2.appendChild(document.createTextNode(\\"Please enter the following information:\\")); div.appendChild(div2); var hidden_input = document.createElement(\\"input\\"); hidden_input.name = \\"selected_screen\\"; hidden_input.type = \\"hidden\\"; hidden_input.value = \\"Open Account Submit\\"; div.appendChild(hidden_input); function create_field(id, name, left1, top1, width1, left2, top2, width2) { var div2_header = document.createElement(\\"div\\"); div2_header.style.position = \\"absolute\\"; div2_header.style.left = left1 + \\"px\\"; div2_header.style.top = top1 + \\"px\\"; div2_header.style.width = width1 + \\"px\\"; div2_header.style.fontSize = \\"12px\\"; div2_header.innerHTML = name; div2_header.style.background = \\"grey\\"; div.appendChild(div2_header); var div2_input = document.createElement(\\"input\\"); div2_input.style.position = \\"absolute\\"; div2_input.style.left = left2 + \\"px\\"; div2_input.style.top = top2 + \\"px\\"; div2_input.style.width = width2 + \\"px\\"; div2_input.style.height = 15 + \\"px\\"; div2_input.name = id; div2_input.type = \\"text\\"; div.appendChild(div2_input); } var left1 = 100; var width1 = 100; var left2 = 220; var width2 = 200; top += height; create_field(\\"user_name\\", \\"User Name\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"password\\", \\"Password\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"confirm_password\\", \\"Confirm Password\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"first_name\\", \\"First Name\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"last_name\\", \\"Last Name\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"country\\", \\"Country\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"phone\\", \\"Phone\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"email\\", \\"Email\\", left1, top, width1, left2, top - 3, width2); top = 350; var button = create_submit_button(\\"Open Account Submit\\", \\"Submit\\", 100, top, 50, 20); div.appendChild(button); var button = create_link_button(\\"Open Account Cancel\\", \\"Cancel\\", 200, top, 50, 20); div.appendChild(button); document.body.appendChild(form); } else if (selected_screen == \\"Login Account\\") { var form = document.createElement(\\"form\\"); form.method = \\"post\\"; var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Login Account\\"; form.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; form.appendChild(div); var hidden_input = document.createElement(\\"input\\"); hidden_input.name = \\"selected_screen\\"; hidden_input.type = \\"hidden\\"; hidden_input.value = \\"Login Account Submit\\"; div.appendChild(hidden_input); var width = 500; var height = 35; var top = 120; var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = top + \\"px\\"; div.style.fontSize = \\"12px\\"; div2.appendChild(document.createTextNode(\\"Please enter your credentials:\\")); div.appendChild(div2); var hidden_input = document.createElement(\\"input\\"); hidden_input.name = \\"selected_screen\\"; hidden_input.type = \\"hidden\\"; hidden_input.value = \\"Login Account Submit\\"; div.appendChild(hidden_input); function create_field(id, name, left1, top1, width1, left2, top2, width2) { var div2_header = document.createElement(\\"div\\"); div2_header.style.position = \\"absolute\\"; div2_header.style.left = left1 + \\"px\\"; div2_header.style.top = top1 + \\"px\\"; div2_header.style.width = width1 + \\"px\\"; div2_header.style.fontSize = \\"12px\\"; div2_header.innerHTML = name; div2_header.style.background = \\"grey\\"; div.appendChild(div2_header); var div2_input = document.createElement(\\"input\\"); div2_input.style.position = \\"absolute\\"; div2_input.style.left = left2 + \\"px\\"; div2_input.style.top = top2 + \\"px\\"; div2_input.style.width = width2 + \\"px\\"; div2_input.style.height = 15 + \\"px\\"; div2_input.name = id; div2_input.type = \\"text\\"; div.appendChild(div2_input); } var left1 = 100; var width1 = 100; var left2 = 230; var width2 = 200; top += height; create_field(\\"user_name\\", \\"User Name\\", left1, top, width1, left2, top - 3, width2); top += height; create_field(\\"password\\", \\"Password\\", left1, top, width1, left2, top - 3, width2); top = 250; var button = create_submit_button(\\"Open Account Submit\\", \\"Submit\\", 100, top, 50, 20); div.appendChild(button); var button = create_link_button(\\"Login Account Cancel\\", \\"Cancel\\", 200, top, 50, 20); div.appendChild(button); document.body.appendChild(form); } else if (selected_screen == \\"Open Account Submit\\") { var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Open Account\\"; document.body.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; document.body.appendChild(div); var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = \\"80px\\"; div2.style.fontSize = \\"12px\\"; div2.innerHTML = \\"Your Account is Being Processed. You will be notified when it is ready.\\"; div.appendChild(div2); } else if (selected_screen == \\"Open Account Cancel\\") { var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Open Account\\"; document.body.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; document.body.appendChild(div); var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = \\"80px\\"; div2.style.fontSize = \\"12px\\"; div2.innerHTML = \\"Open Account is Canceled.\\"; div.appendChild(div2); } else if (selected_screen == \\"Login Account Submit\\") { var form = document.createElement(\\"form\\"); form.method = \\"post\\"; var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Main Account.\\"; form.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; form.appendChild(div); var hidden_input = document.createElement(\\"input\\"); hidden_input.name = \\"selected_screen\\"; hidden_input.type = \\"hidden\\"; hidden_input.value = \\"Logout Account Submit\\"; div.appendChild(hidden_input); var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = \\"80px\\"; div2.style.fontSize = \\"12px\\"; div2.innerHTML = \\"You are logged into your account.\\"; div.appendChild(div2); var button = create_submit_button(\\"Logout\\", \\"Logout\\", 100, 250, 50, 20); div.appendChild(button); document.body.appendChild(form); } else if (selected_screen == \\"Login Account Cancel\\") { var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Login Account\\"; document.body.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; document.body.appendChild(div); var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = \\"80px\\"; div2.style.fontSize = \\"12px\\"; div2.innerHTML = \\"Login Account is Canceled.\\"; div.appendChild(div2); } else if (selected_screen == \\"Logout Account Submit\\") { var div = document.createElement(\\"div\\"); div.id = \\"header\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"90px\\"; div.style.fontSize = \\"12px\\"; div.innerHTML = \\"Logout Account\\"; document.body.appendChild(div); var div = document.createElement(\\"div\\"); div.id = \\"main\\"; div.style.position = \\"absolute\\"; div.style.left = \\"100px\\"; div.style.top = \\"125px\\"; div.style.width = \\"700px\\"; div.style.height = \\"400px\\"; div.style.background = \\"grey\\"; document.body.appendChild(div); var div2 = document.createElement(\\"div\\"); div2.style.position = \\"absolute\\"; div2.style.left = \\"100px\\"; div2.style.top = \\"80px\\"; div2.style.fontSize = \\"12px\\"; div2.innerHTML = \\"You are logged out.\\"; div.appendChild(div2); } } var left = 100; var width = 150; create_menu_button(\\"Home\\", left, 50, width, 25); left += width + 10; create_menu_button(\\"Account Management\\", left, 50, width, 25); create_screen(); </script>"; ?> </body> </html>

Answer 1

Found a solution.  Using jquery solved the problem.  Essentially it allowed me to post variables to the server without actually submitting the variables by a regular form.  A snippet of the code is shown below.

 <!DOCTYPE html> <html> <head> <!-- https://www.w3schools.com/jquery/jquery_get_started.asp --> <!-- google --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- microsoft --> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> </head> <body> <?php $name = $_POST['postname']; $loaded = $_POST['postloaded']; if ($name != null) echo "your input is ".$name; if ($loaded == null) { echo "<script> document.addEventListener(\\"DOMContentLoaded\\", function(event) { var loaded = true; $.post('index.php', {postloaded:loaded}, function(data) { $('#result').html(data); }); }); var div = document.createElement(\\"div\\"); div.setAttribute(\\"id\\", \\"result\\"); document.body.appendChild(div); var form = document.createElement(\\"form\\"); var input = document.createElement(\\"input\\"); input.setAttribute(\\"type\\", \\"text\\"); input.setAttribute(\\"id\\", \\"name\\"); form.appendChild(input); var br = document.createElement(\\"br\\"); form.appendChild(br); var input = document.createElement(\\"input\\"); input.setAttribute(\\"type\\", \\"button\\"); input.setAttribute(\\"value\\", \\"submit\\"); input.setAttribute(\\"onclick\\", \\"post();\\"); form.appendChild(input); document.body.appendChild(form); function post() { var name = $('#name').val(); var loaded = true; $.post('index.php', {postname:name, postloaded:loaded}, function(data) { $('#result').html(data); }); } </script>"; } ?> </body> </html>

加载前页面显示空白

问题描述

1 个解决方案

解决方案1
0 2018-04-22 23:14:23

加载前页面显示空白

问题描述

1 个解决方案

解决方案1 0 2018-04-22 23:14:23

解决方案1
0 2018-04-22 23:14:23