stackoom
  简体   繁体   中英

Page showing blank whitespace before loading

 原文  2018-04-22 15:18:26  5   1    javascript/ php/ pageload

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. You may see the website at: 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; 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>

1 answers

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question showing popup before loading the home page Loading a blank page when opened Why is the browser showing the blank page? cordova app showing blank page react router showing blank page Why are showing blank page in reactjs? vue router showing blank page localHost 3000 showing blank page React app showing blank page Wait before showing a loading spinner?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM