我正在构建一个具有以下特性的网站:
- 页面是通过AJAX内联加载的
- CSS、HTML、JavaScript和PHP都是分开的,以便于在一个项目中与多人合作
现在我正在制作一个从数据库动态加载的<select>
标记。只有我遇到了视觉延迟,我的相关页面是:
HTML,content/sellmods.php
:
<h2>Sell mods</h2><br>
<form name="sellmods" method="post" action="sellmods">
<table class="accdet">
<tr class="inputcontainer">
<td class="label">Mod:</td>
<td class="input"><select name="mod"></td>
<td class="check"></td>
<td class="errormessage"></td>
</tr>
</table>
</form>
来自我自己framework.js
:的相关JavaScript
function preprocess(form) {
$(form).find("select").each(function() {
var select = $(this);
callService({
name: "select_" + $(this).attr("name"),
data: { },
success: function(json) {
$(json).each(function() {
var html = "";
$(this.options).each(function() {
html += "<option value='" + this.id + "'>" + this.value + "</option>";
});
$(select).append(html);
});
}
});
});
}
PHP后端,select_mod.php
:
include_once("../content/includes/connect.php");
include_once("_functions.php");
checkAuthorization();
try {
$result = $dbh->query("SELECT modId, name FROM mods ORDER BY name ASC");
} catch (PDOException $ex) {
error($ex);
}
$options = array();
while ($row = $result->fetch()) {
$options[] = array(
"id" => $row->modId,
"value" => $row->name
);
}
echo json_encode(array(
"options" => $options
));
$dbh->close();
页面如何加载,一旦你点击链接,例如:
function loadPage(dataUrl) {
$.ajax({
url: "content/" + dataUrl + ".php",
success: function(html) {
setContent(html, dataUrl);
},
error: function(html, message) {
$.ajax({
url: "content/notfound.php",
success: function(html) {
setContent(html, "notfound");
},
error: function(html, message) {
finalError(message);
}
});
}
});
}
function setContent(html, url) {
html = $.parseHTML(html);
$("#pagemain").html(html);
$(html).filter("form").each(function() {
preprocess($(this));
});
setNavTitle(url);
//only if you actually load a different page
if (currentFilename() !== url) {
window.history.pushState({
"url": url
}, "", url);
}
//cannot unload old js
//load new js
if (typeof loadedScripts[url] === 'undefined') {
$.getScript("javascript/" + url + ".js", function() {
$("#pagemain").trigger("pageload");
loadedScripts[url] = 1;
});
}
else {
$("#pagemain").trigger("pageload");
}
fireInputs();
}
我知道延迟是因为这个原因:
- 我触发
loadPage("sellmods")
- 一个AJAX调用被用来获取页面,一些小的延迟(例如40ms),然后内容被放在网站上
- 然后它开始
preprocess
所有表单,导致对services/select_mods.php
的AJAX调用 - 完成后(再次约40ms),网站会更新
这导致了可通知的40ms延迟(根据服务器负载的不同,有时可能会更大),您将如何解决这个问题,使其在视觉上最不烦人?
用户现在可以看到一个空的<select>
标签,然后它突然开始填充数据。这不仅是<select>
的问题,其他数据也会像这样动态后加载。
请记住,我想将HTML和PHP分开,也欢迎任何其他针对该设计原则的解决方案。
我希望这个问题足够清楚。
通常用户会接受加载标志。因此,您可以显示一个,直到加载ajax页面的最后一部分。例如,您可以有一个注册表,其中包含要执行的所有ajax调用。当它们加载每个成功事件时,会从注册表中删除其ajax;如果没有更多的内容可加载,则向用户显示内容。希望,这很有道理。。。