現在Webサイトのコーディングをしています。
■環境・要件
サイト自体はIE8(win7)とIE11(win10)に対応
ファイルサーバにhtmlなどのwebサイトに必要なファイルを配置してサイトを表示させる(Webサーバを使用しない)
jqueryは使用可能
開発環境はIE8
■ページ構成
各ページの構成は2ペイン構成で、上95pxがサイトタイトルとメニューが表示されるようになっています。
この部分は"topmenu"と呼んでおり、それより下のコンテンツ部分を"content"と呼んでいます。
■topmenuについて
topmenu部分は、コンテンツとは別のページに"header.html"として用意しておき、以下のjsにて呼び出しています。
header.htmlは各コンテンツページと同じ階層です。
$(function(){ $("#topmenu").load("header.html") });
■現象詳細
各ページのcontent部分については、ページを開くとすぐに表示されるのですが、jsで読み込んでいるtopmenu部分がIE11のみ少し(数秒)時間がかかります。
IE8でも表示は遅れますが、気になるほどの遅延ではありません。(1秒以内)
■改善したい点
IE11でのtopmenu部分の読み込みを早くしたい
■試したこと (結果はすべてかわらず)
jQueryの読み込み順序を変える
ドキュメントモードを指定しない
IE11でもIE8用のjQueryを読み込んでからIE11用を読み込む
■ソース
各ソースは以下の通りです。
□コンテンツページHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www,w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="X-UA-Conpatible" content="IE=EmulateIE8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF=8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Style-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="./assets/css/site.css"> <!-- jQuery読み込み --> <!-- [if lte IE 8] --> <script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script> <!-- [end if] --> <!-- [if gte IE 9] --> <script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script> <!-- [end if] --> <script type="text/javascript" src="./assets/js/header.js"></script> <title>TEST Page</title> </head> <body> <div id="topmenu">Loading Header Menu...</div> <!-- ここにコンテンツ --> </body> </html>
□header.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www,w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="X-UA-Conpatible" content="IE=EmulateIE8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF=8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Style-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="./assets/css/site.css"> <link rel="stylesheet" type="text/css" href="./assets/css/header.css"> <link rel="stylesheet" type="text/css" href="./assets/css/menu.css"> <!-- jQuery読み込み --> <!-- [if lte IE 8] --> <script type="text/javascript" src="./assets/js/jqyert-1.12.4.js"></script> <!-- [end if] --> <!-- [if gte IE 9] --> <script type="text/javascript" src="./assets/js/jqyert-3.2.1.js"></script> <!-- [end if] --> <title>Header</title> </head> <body> <!-- ここにサイトタイトルとロゴ --> <!-- ここにメニューバー --> </body> </html>
皆さんのお知恵をお貸しください
以上よろしくお願い致します。
回答3件
あなたの回答
tips
プレビュー