ロードに時間がかかり、ローディングが表示されます。

ヘッダーとナビゲーション生成ロジックを再利用する方法として、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 readyを使用する必要はありません。例えば '$（...）'（省略形） – MrBizle

@MrBizle、ええ...このサーバで利用できる唯一のサーバ側のlangはluaです。私は、htmlにluaを埋め込む方法を理解するために見なければならないでしょう/その逆です。 – Happydevdays

下#includeNavigation要素をされて検討していますあなたは、テンプレート言語のいずれかを使用する必要があります。

インクルードがシンプルなHTMLファイルの場合は、HandlebarsまたはDustを使用できます。コードをコピーすればそれだけです.Javascriptではこれらのテンプレートをレンダリングする必要があります。ドキュメントを参照してください。

代わりに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、うん、私はちょうどそれを実現し、修正していた。私は実現しないでOPからコピーしました。 – Ozan

あなたの問題はdocument.readyイベントが発生するまでのロード機能が実行されないということです試してみてください。ページがレンダリングを開始した後のことです。すべてを同時に表示するには、.loadのコールバックを使用してすべてを表示することができます。だからすべてが隠されている、

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

あなたはもちろん、両方がロードされていることを知る必要があります。

スタティックパスからHTMLをレンダリングするためにjavascriptを使用せず、速度の代わりにサーバー側のlangを使用することをお勧めします。

出典

2016-08-10 12:58:32 MrBizle

私はPHPに精通していますが、私はこの特定のサーバーで利用できる唯一のlangはluaです。htmlに埋め込む方法を教えてくれるリソースを見つけなければなりません。逆の場合もあります。 – 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を入力してください。 –

ロードに時間がかかり、ローディングが表示されます。

答えて

関連する問題