ページ読み込み後にアニメスタート

下記ページにオープニングアニメとして、
Adobe Animateで作ったcanvasを入れました。
5.5秒後にフェードアウトするのですが、
場合によっては読み込みに時間がかかり、アニメの途中でフェードアウトしてしまいます。
完全に読み込んだ後にアニメをスタートさせ、その5.5秒後にフェードアウトさせるには、どうすればよいでしょうか。
ご教示のほどよろしくお願いいたします。

【URL】
http://composite-view.jp/test2/

<!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <title>test</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="top2.css" type="text/css"> <script type="text/javascript" src="https://special.nikkeibp.co.jp/js/bpcommon/jquery-3.x.min.js"></script> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script src="anime1.js"></script> <script src="anime_cont1.js"></script> <script type="text/javascript">

$(function() {
setTimeout(function(){
$('.start').fadeOut(1000);
},5500);
});
</script>

</head> <body onload="init();"> <div class="start pc"> <div id="animation_container" style="background-color:rgba(214, 214, 214, 0.00); width:1000px; height:600px"> <canvas id="canvas" width="1000" height="600" style="position: absolute; display: block; background-color:rgba(214, 214, 214, 0.00);"></canvas> <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1000px; height:600px; position: absolute; left: 0px; top: 0px; display: block;"> </div> </div> </div> <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>