質問の閲覧ありがとうございます。
個人的に製作しているホームページにJavaScriptでタブを切り替えられる機能を実装しているのですが、切り替えて表示するコンテンツが重いせいか、初回切り替え時にコンテンツのロードによる空白が生まれてしまいます。
2回目以降はスムーズに表示されるのですが、初回からスムーズに切り替えられるようにしたいです。
0から自分で書いてみたので、効率の悪い処理をしている部分がありましたらその部分の指摘も是非お願い致します。
###前提
・jQuery 1.12.4
・タブ切り替えで表示したいコンテンツは、Chart.jsを使用したグラフ(使用するデータはphpで引っ張ってきたもの)
###試したこと
ページロード後に表示したいコンテンツ以外を.hide()
することで、コンテンツを先に読み込ませる。(しかし、空白が生まれる)
###ソースコード
HTML
1<div id="tabs"> 2 <div id="content1tab" class="tab"> 3 <span> 4 タブ1 5 </span> 6 </div> 7 <div id="content2tab" class="tab"> 8 <span> 9 タブ2 10 </span> 11 </div> 12 <div id="content3tab" class="tab"> 13 <span> 14 タブ3 15 </span> 16</div> 17<div id="contents"> 18 <div id="content1" class="content"> 19 コンテンツ1 20 </div> 21 <div id="content2" class="content"> 22 コンテンツ2 23 </div> 24 <div id="content3" class="content"> 25 コンテンツ3 26 </div> 27</div>
JavaScript
1$('#tabs .tab').click(function() { 2 //タブのIDを元にコンテンツのIDを指定 3 var content_id = "#" + $(this).attr("id").slice(0, -3); 4 $(content_id).siblings().hide(); 5 $(content_id).show(); 6}); 7 8//ページ表示時、コンテンツ1以外を隠す 9window.addEventListener('DOMContentLoaded', function() { 10 $('#contents').children(':first-child').siblings().hide(); 11});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。