[英]HTML momentarily pauses loading to process PHP, the result is ugly
由於這是一個非常簡單的場景,因此不確定是否真的需要該示例的特定代碼。 我有一個php文件:
<html>
<?php
*Some code hat pulls data from a database. This involves queries, for loops, etc.
?>
</html>
該問題僅在Google Chrome上發生:頁面開始加載,處理PHP,然后關閉標簽。 這會導致難看的向下滑動式效果,其中下一頁看起來像是在上一頁加載的樣子。
這就是Chrome在片刻中的樣子,而且我知道我正在以一種非常非常規的方式來做某事。 我真的還不了解php的約定,但是我學得很快。
我應該做些什么? 我寧願不要在php代碼之前關閉標簽,因為那樣的話,事情將不合時宜,而php之后的所有內容當然都不會包含在html標簽中。
編輯:忘記提及它,它會在您登錄后重定向期間發生!
編輯:
<?php
require 'autoload.php';
use Parse\ParseClient;
use Parse\ParseObject;
use Parse\ParseQuery;
use Parse\ParseACL;
use Parse\ParsePush;
use Parse\ParseUser;
use Parse\ParseInstallation;
use Parse\ParseException;
use Parse\ParseAnalytics;
use Parse\ParseFile;
use Parse\ParseCloud;
use Parse\ParseRelation;
use Parse\ParseSessionStorage;
session_start();
ParseClient::initialize( $app_id, $rest_key, $master_key );
$currentUser = ParseUser::getCurrentUser();
if ($currentUser) {
} else {
header("Location: http://rev-u.co/login");
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Noticia+Text' rel='stylesheet' type='text/css'>
<script src="//www.parsecdn.com/js/parse-1.3.2.min.js">
</script>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/home.css">
<link rel="stylesheet" href="/css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="/js/star-rating.min.js" type="text/javascript">
</script>
<link href="/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="/js/bootstrap.js">
</script>
<script type="text/javascript" src="/js/centralpage.js">
</script>
<meta name="viewport" content="width=device-width">
</head>
<header>
<div class="logo">
<h1 class="brand">
Rev-u
</h1>
</div>
<div class="topbuttons">
<form action="/logout.php">
<button type="submit" class="btn btn-primary" id="login">
Logout
</button>
</form>
<button class="btn btn-secondary" id="profilebutton">
My Profile
</button>
<a href="index">
<button class="btn btn-secondary active" id="homebutton">
Home
</button>
</a>
</div>
</header>
<div class="wrapper">
<div class="recentfeedcontainer">
<h3>
Recent Reviews:
</h3>
<div class="loadercontainer">
<div id="circularG" class="recentloader">
<div id="circularG_1" class="circularG">
</div>
<div id="circularG_2" class="circularG">
</div>
<div id="circularG_3" class="circularG">
</div>
<div id="circularG_4" class="circularG">
</div>
<div id="circularG_5" class="circularG">
</div>
<div id="circularG_6" class="circularG">
</div>
<div id="circularG_7" class="circularG">
</div>
<div id="circularG_8" class="circularG">
</div>
</div>
</div>
<?php
$url;
$currentfriend;
$friendname;
// $currentUser
$relation = $currentUser->getRelation("FriendRelations");
$results = $relation->getQuery()->find();
if (count($results) != 0)
{
for ($i = 0; $i < count($results); $i++)
{
$object = $results[$i];
if ($results[$i]->get("profilePicture") != null)
{
$url = $results[$i]->get("profilePicture")->getUrl();
}
else
{
$url = "img/batmanfacebook.jpg";
}
$currentfriend = $results[$i]->get("username");
if ($results[$i]->get("name") != null) $friendname = $results[$i]->get("name");
else $friendname = $currentfriend;
$query = new ParseQuery("Reviews");
$query->equalTo("User", $currentfriend);
$query->descending("createdAt");
$result = $query->first();
// $review = $result->
get("text");
// $rate = $result->
get("Rating");
if (count($result) > 0) echo '
<div id = "reviewitem" class=reviewitem_"' . $i . '">
<input id="input-id' . $i . '" type="number" class="rating" min=0 max=5 step=1 data-size="xs" data-show-caption="false" data-show-clear="false" readonly="false">
<div id = "reviewimgcontainer" class="reviewimgcontainer_' . $i . '">
<img src="' . $url . '">
<h5>
<a href="/u/' . $currentfriend . '">
' . $friendname . '
</a>
</h5>
</div>
<p>
' . $result->get("text") . '
</p>
</div>
';
}
?>
<script type="text/javascript">
$('.loadercontainer').addClass('hidden');
</script>
<?php
}
?>
</div>
</div>
<div class="friendscontainer">
<h3>
Following
</h3>
<ul>
</ul>
<div class="loadercontainer">
<div id="circularG">
<div id="circularG_1" class="circularG">
</div>
<div id="circularG_2" class="circularG">
</div>
<div id="circularG_3" class="circularG">
</div>
<div id="circularG_4" class="circularG">
</div>
<div id="circularG_5" class="circularG">
</div>
<div id="circularG_6" class="circularG">
</div>
<div id="circularG_7" class="circularG">
</div>
<div id="circularG_8" class="circularG">
</div>
</div>
</div>
</div>
<div class="friendstab">
<img style="border-radius:5px; box-shadow: 0px 0.5px 1.2px 0.5px;
margin-top:235px; width:40px; height:40px" src="img/friends.png">
</div>
</html>
PHP在服務器上執行,然后將結果發送到瀏覽器。 瀏覽器永遠不會看到任何PHP代碼。 您一定做錯了其他事情。 也許最好與我們分享您的完整代碼。
在任何輸出發送到客戶端之前,請始終執行數據庫查詢和密集循環。 您的代碼一般結構應如下所示:
<?php
// Some code hat pulls data from a database. This involves queries, for loops, etc.
?>
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>blah</title>
</head>
<body>
<p>I'm the content</p>
</body>
</html>
確實應該投票結束這一點,因為它太廣泛了,但是有些提示可能會指出正確的方向...
查看您的網絡瀑布(開發人員工具)。 這將告訴您延遲是否確實在HTML生成中發生。 除非您進行了顯式刷新(否則有時會有充分的理由),否則您會得到分塊的響應,這是非常不尋常的。 當然,它與結束標記的放置位置無關 。 如果問題出在您的PHP上,請使用探查器來隔離問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.