加載前頁面顯示空白
[英]Page showing blank whitespace before loading
問題描述
我正在使用的網站具有以下代碼。 它用於商業用途。 該網站實際上是PHP，並且文件是服務器上存在的index.php。 您可能會在以下網站上看到該網站：www.tradingcharts.ca。 到目前為止，該網站在功能方面完全可以正常運行。 還有一些功能要添加，例如將表單數據保存到磁盤和數據驗證。
我的問題是，最終用戶每次加載網站都會有明顯的延遲。 當最終用戶單擊表單上的“提交”按鈕以打開帳戶或登錄帳戶時，也會發生此延遲。 延遲持續約半秒鍾，在呈現內容之前，屏幕將變為空白。 事實是，當我在使用IIS的個人計算機上加載網站時，不會發生這種現象。 僅當其上載到異地服務器時才會發生。 我願意就如何糾正此問題提出建議。 請隨時查看以下源代碼：
<!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>
1 個解決方案
解決方案1
0 2018-04-22 23:14:23
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>
在加載主頁之前顯示彈出窗口
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.