【JavaScript】コンテンツを全て読み込んでから、タブ切り替えを行いたい

質問の閲覧ありがとうございます。
個人的に製作しているホームページにJavaScriptでタブを切り替えられる機能を実装しているのですが、切り替えて表示するコンテンツが重いせいか、初回切り替え時にコンテンツのロードによる空白が生まれてしまいます。
２回目以降はスムーズに表示されるのですが、初回からスムーズに切り替えられるようにしたいです。

0から自分で書いてみたので、効率の悪い処理をしている部分がありましたらその部分の指摘も是非お願い致します。

###前提
・jQuery 1.12.4
・タブ切り替えで表示したいコンテンツは、Chart.jsを使用したグラフ（使用するデータはphpで引っ張ってきたもの）

###試したこと
ページロード後に表示したいコンテンツ以外を.hide()することで、コンテンツを先に読み込ませる。(しかし、空白が生まれる)

###ソースコード

HTML
1<div id="tabs">
2    <div id="content1tab" class="tab">
3        <span>
4            タブ１
5        </span>
6    </div>
7    <div id="content2tab" class="tab">
8        <span>
9            タブ２
10        </span>
11    </div>
12    <div id="content3tab" class="tab">
13        <span>
14            タブ３
15        </span>
16</div>
17<div id="contents">
18    <div id="content1" class="content">
19        コンテンツ１
20    </div>
21    <div id="content2" class="content">
22        コンテンツ２
23    </div>
24    <div id="content3" class="content">
25        コンテンツ３
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//ページ表示時、コンテンツ１以外を隠す
9window.addEventListener('DOMContentLoaded', function() {
10    $('#contents').children(':first-child').siblings().hide();
11});