loadメソッドを使ってヘッダー、ナビ、フッターを外部化したのだけど・・

●参考にした記事
【jQuery】htmlページをパーツごとに分けて読み込む方法 http://code-life.hatenablog.com/entry/2015/10/27/222803

画像


この文中後半に、「loadメソッドで読み込んだページでjQueryが機能しない問題」というセクションがあります。

<引用・・
「実行順序によってはページが読み込まれる前にグローバルメニューのjQueryが実行されてしまい。メニューが機能しない なんてことがあります。」
・・
「一番簡単な方法はパーツのhtmlの方にscriptを記述してしまうことです!」
・・>

というのですが、直にJavascriptを書き込んだところ、エラーだらけで動作しませんでした。

試しに外部パーツ化したhtmlにリンクで読み込んだ場合、

同期的問題でchromeのデバックで「[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated・・・」という警告が出てしましました。
これは、非推奨になりますよ・・ということでした。

Javascriptのソースの構文と睨めっこするも良くわからず(´・ω・`)・・


●答えが見つかったブログ
jQueryのready()やload()のタイミングの違い http://www.flatflag.nir87.com/ready-1363

画像


記事中、「ready()で取得したサイズがおかしい」というセクションを参考としました。

自分が触っているソースも、読み込み順序が狂って必要なパラメータを変数に格納できていないようでしたので、以下のように修正。

 元>$(document).ready(function() {

 修正>$(window).on('load', function() {

ちなみに、ナビゲーションの構造は以下のサイトのソースを改造したものです。
■Big Menus, Small Screens: Responsive, Multi-Level Navigation
https://webdesign.tutsplus.com/tutorials/big-menus-small-screens-responsive-multi-level-navigation--webdesign-8452

修正したソースの元
画像


画像