파일 seperation에 나는 다음과 같은 characterics이있는 사이트 짓고 있어요

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에서 :

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")를 실행하면 예를 들어 링크를 클릭하면, aded.
2. 페이지를 가져 오기 위해 AJAX 호출이 수행되고, 약간의 지연 (예 : 40ms)이 발생하면 웹 사이트에 내용이 저장됩니다.
3. 그런 다음 preprocess 모든 양식으로 시작하여 services/select_mods.php에 대한 AJAX 호출이 발생합니다.
4. 완료되면 (약 40ms) 웹 사이트가 업데이트됩니다.

이 결과는 눈에 띄게 성가신하게하려면이 문제를 어떻게 해결할 것입니까? (서버 부하에 따라 때때로 커질 수 있습니다) 40ms 지연이 발생합니다.

이제 사용자는 빈 <select> 태그를 보게되고 갑자기 데이터로 채우기 시작합니다. 이것은 <select>의 문제 일뿐만 아니라 다른 데이터도 이와 같이 동적으로로드됩니다.

HTML과 PHP를 분리하여 보관하고 싶습니다. 그 디자인 원리에 대한 다른 솔루션도 환영합니다.

나는 그 질문이 충분히 분명하기를 희망한다.

Answer 1

일반적으로 사용자가 로딩 서명을 수락합니다. 따라서 아약스 페이지의 마지막 부분이로드 될 때까지 하나를 표시 할 수 있습니다. 예를 들어, 할 일을 할 수있는 모든 아약스 호출을 포함하는 레지스트리가 있습니다. 그들은 성공 이벤트를로드 할 때마다 레지스트리에서 아약스를 제거합니다. 로드 할 내용이 더 이상 없으면 사용자에게 내용을 표시합니다. 희망, 그 말이 맞는 ...