网站上的文件分离(在多人项目中）

我正在构建一个具有以下特性的网站：

• 页面是通过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();
}

我知道延迟是因为这个原因：

1. 我触发loadPage("sellmods")
2. 一个AJAX调用被用来获取页面，一些小的延迟（例如40ms），然后内容被放在网站上
3. 然后它开始preprocess所有表单，导致对services/select_mods.php的AJAX调用
4. 完成后（再次约40ms），网站会更新

这导致了可通知的40ms延迟（根据服务器负载的不同，有时可能会更大），您将如何解决这个问题，使其在视觉上最不烦人？

用户现在可以看到一个空的<select>标签，然后它突然开始填充数据。这不仅是<select>的问题，其他数据也会像这样动态后加载。

请记住，我想将HTML和PHP分开，也欢迎任何其他针对该设计原则的解决方案。

我希望这个问题足够清楚。