前提・実現したいこと
ヘッダーやフッターの共通化をするため、jqueryのloadを使用して外部ファイルを読み込ませたところ、外部ファイルが遅れて表示されてしまいます。体感としては、もとのhtml表示後0.5秒くらいしてから、外部ファイルが急に表示されるような感じです。
表示遅延を解消する方法をご教示いただきたいです。何卒よろしくお願いいたします。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
本体
html
1<head> 2 <meta charset="UTF-8"> 3 <title>Document</title> 4 <link rel="stylesheet" href="include_style.css"> 5 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 6 <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 8</head> 9<body> 10 <div id="head_common"></div> 11 <div class="body_wrap"><img src="images/lecoqsportif.jpg" alt=""></div> 12 <div id="foot_common"></div> 13<!--ここからjquery--> 14 <script> 15 $(function(){ 16 $('#head_common').load('include_header.html'); 17 }); 18 $(function(){ 19 $('#foot_common').load('include_footer.html'); 20 }); 21 </script> 22</body> 23</html>
外部ファイル1のhtml
html
1<body> 2<div class="header_wrap"> 3 <a class="logo" href=""><img src="images/logo-lecoqsportif@2x.png" alt=""></a> 4 <ul> 5 <li><a href="">NEWS</a></li> 6 <li><a href="">MEN</a></li> 7 <li><a href="">WOMEN</a></li> 8 <li><a href="">STORES</a></li> 9 <li><a href="">ABOUT US</a></li> 10 <li class="online_store-rink"><a href="">ONLINE STORE</a></li> 11 </ul> 12</div> 13</body>
外部ファイル1のcss
css
1body{ 2 margin:0; 3 padding:0; 4 font-family:sans-serif; 5} 6/*リンクスタイル指定*/ 7a{ 8 text-decoration: none; 9 color:black; 10} 11.header_wrap{ 12 width:75%; 13 height:100px; 14 margin:auto; 15 display:flex; 16 justify-content: space-between; 17 align-items: center; 18} 19.header_wrap ul{ 20 width:57%; 21 height:100%; 22 display:flex; 23 justify-content: space-between; 24 align-items: center; 25 list-style: none; 26 padding:0; 27 margin:0; 28 font-size:13px; 29 font-weight:bold; 30} 31.header_wrap li{ 32 height:100%; 33 display:flex; 34 align-items:center; 35} 36.header_wrap a{ 37 height:50%; 38 border-bottom: 3px solid white; 39 box-sizing: border-box; 40 display:flex; 41 align-items:center; 42 transition: 0.5s; 43} 44.header_wrap li a:hover{ 45 box-sizing: border-box; 46 border-bottom:3px solid red; 47 transition: 0.9s; 48} 49.logo{ 50 height:50%; 51 transition: 0.7s; 52} 53.logo:hover{ 54 filter:opacity(70%); 55 transition: 0.7s; 56} 57.logo img{ 58 height:100%; 59} 60.online_store-rink a{ 61 display: flex; 62 align-items: center; 63} 64.online_store-rink a::before { 65 content: "shopping_cart"; 66 font-family: "Material Icons"; 67 font-size:18px; 68 padding-right:3px; 69 padding-bottom:4px; 70}
外部ファイル2のhtml
html
1<body> 2<div class="footer_background"> 3 <div class="footer_wrap"> 4 <div class="footer_left"> 5 <p>le coq sportif</p> 6 <ul> 7 <li><a href="">会社概要</a></li> 8 <li><a href="">お問い合わせ</a></li> 9 <li><a href="">プライバシーポリシー</a></li> 10 <li><a href="">特定商取引法に基づく表記</a></li> 11 <li><a href="">お客様への重要なお知らせ</a></li> 12 </ul> 13 </div> 14 <div class="footer_right"> 15 <p>FOLLOW US</p> 16 <a href=""><i class="fab fa-twitter-square"></i></a> 17 <ul> 18 <li class="icon-facebook"><a href="">le coq sportif</a></li> 19 <li class="icon-space"><a href="">le coq sportif golf collection</a></li> 20 <li class="icon-space"><a href="">le coq sportif shoes</a></li> 21 </ul> 22 <ul> 23 <li class="icon-insta"><a href="">le coq sportif</a></li> 24 <li class="icon-space"><a href="">le coq sportif golf collection</a></li> 25 <li class="icon-space"><a href="">le coq sportif shoes</a></li> 26 <li class="icon-space"><a href="">le coq sportif snap</a></li> 27 </ul> 28 <ul> 29 <li class="icon-youtube"><a href="">le coq sportif</a></li> 30 <li class="icon-space"><a href="">le coq sportif golf collection</a></li> 31 </ul> 32 </div> 33 </div> 34 <div class="footer_wrap-bottom"> 35 <p>COPYRIGHT c DESCENTE LTD. ALL RIGHTS RESERVED.</p> 36 </div> 37</div> 38</body>
外部ファイル2のcss
css
1body{ 2 margin:0; 3 padding:0; 4 font-family:sans-serif; 5} 6/*リンクスタイル指定*/ 7a{ 8 text-decoration: none; 9 color:black; 10} 11.footer_background{ 12 height:565px; 13 background-color:whitesmoke; 14} 15.footer_wrap{ 16 width:75%; 17 height:78%; 18 margin:auto; 19 display:flex; 20 padding-top:40px; 21} 22.footer_wrap-bottom{ 23 width:75%; 24 height:10%; 25 margin:auto; 26 font-size:10px; 27} 28/*コーポレートパート*/ 29.footer_left{ 30 width:30%; 31} 32.footer_left p{ 33 font-weight: bold; 34 font-size:14px; 35 margin-bottom:20px; 36} 37.footer_left ul{ 38 list-style: none; 39 padding:0; 40 font-size:12px; 41} 42.footer_left li{ 43 padding-bottom:20px; 44} 45/*SNSパート*/ 46.footer_right{ 47 width:70%; 48} 49.footer_right i{ 50 font-size:25px; 51 margin-bottom:15px; 52} 53.footer_right p{ 54 font-weight: bold; 55 font-size:15px; 56 margin-bottom:15px; 57} 58.footer_right ul{ 59 list-style: none; 60 font-size:12px; 61 padding:0; 62} 63.footer_right li{ 64 display:flex; 65 align-items: center; 66 padding-bottom:5px; 67} 68.icon-facebook::before{ 69 font-family:"Font Awesome 5 brands"; 70 font-weight:400; 71 content:"\f082"; 72 font-size:25px; 73 padding-right:15px; 74} 75.icon-insta::before{ 76 font-family:"Font Awesome 5 brands"; 77 font-weight:400; 78 content:"\f16d"; 79 font-size:25px; 80 padding-right:15px; 81} 82.icon-youtube::before{ 83 font-family:"Font Awesome 5 brands"; 84 font-weight:400; 85 content:"\f167"; 86 font-size:20px; 87 padding-right:15px; 88} 89.icon-space::before{ 90 font-family:"Font Awesome 5 free"; 91 font-weight:400; 92 content:"\f082"; 93 font-size:25px; 94 padding-right:12px; 95}
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/08 10:46