Question

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

通过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分离，欢迎任何其他解决方案的设计原则。

我希望这个问题很清楚。

Answer 1

通常用户接受加载标志。因此，您可以显示一个，直到加载ajax页面的最后一部分。例如，您可以拥有一个注册表，其中包含要执行的所有ajax调用。当他们加载每个成功事件时，从注册表中删除它的ajax;如果没有更多要加载的内容，则向用户显示内容。希望，这是有道理的......

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

1 个答案: