로드하는 데 오랜 시간이 걸리고로드가 표시됩니다.

헤더와 탐색 생성 논리를 다시 사용하는 방법으로 하나의 HTML 파일을 다른 HTML 파일에 포함합니다.로드하는 데 오랜 시간이 걸리고로드가 표시됩니다.

내 사이트의 페이지를 탐색 할 때, 이 포함 파일에 포함 된이 아닌 HTML을 볼 수 있습니다. 그래야 메뉴와 배너가 나중에로드되는 것을 볼 수 있습니다. 나는 모든 것을 동시에로드하고 싶습니다.

여기는 rendered HTML입니다. 나는 현재 코드로 일하고 있어요

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <script src="assets/js/jquery-2.1.3.min.js"></script> 
    <script> 
    $(function(){ 
     $("#includeHeader").load("includes/templates/header.html"); 
     $("#includeNavigation").load("includes/templates/navigation.html"); 
    }); 
    </script> 
    <div id="includeHeader"></div> 
</head> 

<body> 

    <div id="wrapper"> 

     <!-- Navigation --> 
     <div id="includeNavigation"></div>

페이지 대의 바닥에 외부 라이브러리/CSS를 이동하려고 할 : 나는이 페이지를 생성하는 방법을

그리고 여기 당신을 보여주는 코드입니다 헤더. 그러나 지금까지는 아무 것도 실제로 변경되거나 개선되지 않았습니다.

출처

2016-08-10 Happydevdays

안녕하세요, 정적 경로에서 HTML로로드하는 경우 PHP와 같은 서버 측 언어를 사용해야합니다. javascript를 실제로 사용해야하는 경우 doc 준비를 사용할 필요가 없습니다. 예 :'$ (...)'(약식) – MrBizle

@MrBizle, 예 ...이 서버에서 사용할 수있는 유일한 서버 측 언어는 lua입니다. html로 루아를 포함하는 방법을 알아 내기 위해 살펴 봐야 할 것입니다. – Happydevdays

에서 #includeNavigation 요소입니다 고려하고 당신은 템플릿 언어 중 하나를 사용해야합니다.

포함하는 HTML 파일이 단순한 경우 Handlebars 또는 Dust을 사용할 수 있습니다. 코드를 복사하면됩니다. 그렇다면 자바 스크립트에서이 템플릿을 렌더링하면됩니다. 설명서를 참조하십시오.

대신 Jade/Pug을 사용할 수 있지만 구문은 HTML과 다르므로 복사 붙여 넣기의 문제 만이 아닙니다.

출처

2016-08-10 13:13:21 strah

나는 그 생각을 좋아한다! +1! – Happydevdays

$(handler)을로드하는 중입니다.이 형식은 $.ready()의 형식입니다. 따라서 header.html 및 navigation.html을로드하기 전에 문서가 모든 것을로드 할 때까지 기다립니다.

는

<head> 
    <script src="assets/js/jquery-2.1.3.min.js"></script> 
    </head> 
    <body> 
    <div id="includeHeader"></div> 
    <script> 
     $("#includeHeader").load("includes/templates/header.html"); 
     $("#includeNavigation").load("includes/templates/navigation.html"); 
    </script> 
    </body>

출처

2016-08-10 12:54:24 Ozan

head 태그 아래에 div 태그를 정의하는 것이 이상합니다. :) –

@HareshVidja, 예, 방금 그것을 깨닫고 고치기 시작했습니다. 나는 방금 깨닫지 않고 영업직에서 복사했습니다. – Ozan

귀하의 문제가 document.ready 이벤트가 발생 될 때까지로드 기능이 실행되지 않는다는 것입니다보십시오. 페이지가 렌더링을 시작한 후입니다. 모든 것을 동시에 표시하려면 .load에서 콜백을 사용하여 모든 것을 표시 할 수 있습니다. 그래서 모든 것이 숨겨져 있습니다.

$("#result").load("ajax/test.html", function() { 
    /// show your stuff 
});

물론 두 가지가 모두로드되어 있어야합니다.

정적 경로에서 HTML을 렌더링하는 데 javascript를 사용하지 말고 속도 대신 서버 측 lang을 사용하는 것이 좋습니다.

출처

2016-08-10 12:58:32 MrBizle

확인. 나는 PHP에 익숙하지만이 특정 서버에서 사용할 수있는 유일한 lua는 lua입니다.html로 또는 그 반대로 lu를 삽입하는 방법을 보여주는 리소스를 찾아야합니다. – Happydevdays

이 https://github.com/bungle/lua-resty-template – MrBizle

나는 그것의 부하 모든 DOM 요소에 대해 기다리지 않고 어느 정도 빨리 만들 생각 나는 #includeHeader 요소

<head> 
    <script src="assets/js/jquery-2.1.3.min.js"></script> 
    </head> 
    <body> 
    <div id="includeHeader"></div> 
    <script> 
     $("#includeHeader").load("includes/templates/header.html", function(data){ 
      console.log("header loaded"); 
      $("#includeNavigation").load("includes/templates/navigation.html", function(data){ 
       console.log("navigation loaded"); 
      }); 
     }); 
    </script> 
    </body>

출처

2016-08-10 13:05:45

은 전혀 작동하지 않습니다. 아무것도 포함되지 않습니다. – Happydevdays

콘솔 로그를 확인하십시오. 오류가 없는지 확인한 다음 URL을 확인하거나 전체 URL을 사용해보십시오. –

로드하는 데 오랜 시간이 걸리고로드가 표시됩니다.

답변

관련 문제