JSで実装したタブ切り替えの動作がスムーズでは無いので、修正したい

質問の閲覧ありがとうございます。
JavaScriptでタブ切り替えの機能を実装したのですが、各タブの初回クリック時のみ一瞬真っ白になり、見栄えが悪いので修正したいのですが、修正点の検討が付かないので、JSに詳しい方がいらっしゃいましたらご助力いただきたいです。

###実装内容

HTML
1<div id="tabs">
2    <div class="tab active">
3        <span>
4            タブ１
5        </span>
6    </div>
7    <div class="tab">
8        <span>
9            タブ２
10        </span>
11    </div>
12    <div class="tab">
13        <span>
14            タブ３
15        </span>
16    </div>
17</div>
18<div id="contents">
19    <div class="content active">
20        コンテンツ１
21    </div>
22    <div class="content">
23        コンテンツ2
24    </div>
25    <div class="content">
26        コンテンツ3
27    </div>
28</div>

SCSS
1#tabs {
2    .tab {
3        cursor: pointer;
4        display: inline-block;
5    }
6
7    .active {
8        color: red;
9    }
10}
11
12
13#contents {
14    .content {
15        display: none;
16    }
17
18    .active {
19        display: block;
20    }
21}

JavaScript
1$("#tabs .tab").click(function() {
2    if ($(this).not('active')) {
3        $(this).addClass('active').siblings('.tab').removeClass('active');
4        var index = $('#tabs .tab').index(this);
5
6        $('#contents .content').eq(index).fadeIn().css('display','').addClass('active').siblings('.content').removeClass('active');
7        $('#tabs .tab').eq(index).fadeIn().css('display','').addClass('active').siblings('.tab').removeClass('active');
8    }
9})

###発生している問題・エラーメッセージ
各タブの初回クリック時に、コンテンツ部分一瞬真っ白になる（全てdisplay: none;状態）
2回目からは一瞬真っ白になることなくスムーズに表示される

###追記（上手くいった実装方法。しかし、こちらの場合フェードインの実装方法がわかりません。）

JavaScript
1//対象要素取得
2var tabs = document.getElementById('tabs').getElementsByTagName('div');
3var pages = document.getElementById('contents').getElementsByTagName('div');
4
5//タブ切り替え
6function changeTab() {
7    var targetid = this.href.substring(this.href.indexOf('#')+1,this.href.length);
8
9   //指定のタブページだけを表示する
10    for(var i=0; i<pages.length; i++) {
11        if( pages[i].id != targetid ) {
12            pages[i].style.display = "none";
13        }else {
14            pages[i].style.display = "block";
15        }
16    }
17
18   //クリックしたタブを前面に表示する
19    for(var i=0; i<tabs.length; i++) {
20        tabs[i].style.zIndex = "0";
21    }
22    this.style.zIndex = "10";
23
24   //ページ遷移しないようにfalseを返す
25    return false;
26}
27
28//すべてのタブに対して、クリック時にchangeTab関数が実行されるよう指定する
29for(var i=0; i<tabs.length; i++) {
30    tabs[i].onclick = changeTab;
31}
32
33//最初は先頭のタブを選択しておく
34tabs[0].onclick();

行動規範の内容に同意します

回答1件

ベストアンサー

遅れるのは画像でしょうか。それであればプリロードを試してみてください。

【画像の先読み | JavaScript capsule】
http://andante.in/j/画像の先読み/

【【JavaScript】画像をプリロードする】
http://javascript.step-learn.com/contents/J056-preload.html

投稿2017/12/28 08:59

kei344

総合スコア69407

Nerf.this

2017/12/28 09:10

回答ありがとうございます！確かに、中身をテキストのみにした場合は初回でもスムーズな表示がされました。今回表示しているのが、Chart.jsを使用したグラフなので、読み込みが遅いコンテンツであることは間違いないので、仕方ないのかもしれません… 今回質問した方法とは違うのですが、別の方法で実装した場合(追記しておきます)はスムーズに表示されました。しかし、こちらの場合フェードインの実装に詰まってしまいました。こちらのフェードインの実装方法についてもし知っていましたら、お暇なときに確認いただけると助かります！