ローディング後のスリックの挙動

Question

目指している挙動

①ローディングアニメーションが流れる（固定の秒数）
②ページのコンテンツを表示（ファーストビューでは、スリックのスライダーを使用している）
※ページのコンテンツには、表示されてから動きがあるものがあるから、ローディングアニメーションが終わってから、動いて欲しい

###現状の動き
ローディングアニメーションが流れている間にも、ページのコンテンツは動いていて、ローディングアニメーションが終わる頃には、ページコンテンツの動きが終了してしまっている。

###試したこと
初めから、ページコンテンツをdisplay:none;にしておき、delay関数で一定時間後にdisplay:block;のクラスを付与して表示する。

結果

動きに関しては、予定通りに、ローディングアニメーションが終わってから、スライドが動いてくれた。
だが、slickの挙動がおかしくなっていた。
ページコンテンツが表示されてから、初めはスリックのwidthが0pxになっていおり、そして、2枚目のスライドの中盤に差し掛かってやっと指定していたwidthに戻った。

###有識者に質問
１個目：自分の「試したこと」の方向性は合っているのか。また、もっといい方法があるのか。
２個目：自分の「試している」ことの解決方法

###コードを置いておきます。

<div class="loading-bg">
	<div class="loading-logo">
		<img src="/assets/img/logo.png" alt="">
	</div>
</div>
<div class="container">
	<!--ページコンテンツ-->
</div>

$(window).on('load', function () {
	$(".loading-bg").delay(1500).fadeOut('slow', function () {
		$('.container').addClass('appear');
	});
	$(".loading-logo").delay(1300).fadeOut('slow');
});

.container {/*初期非表示*/
	display: none;
}

.container.appear {/*表示*/
	display: block;
}

Answer 1

ご教示いただいた内容で、思った通りの挙動におちつきました。
本当にありがとうございました！！！！！！！！！！！！

その後として、改善した箇所は、

$('.container').addClass('appear');

の後に、以前設定していた、scroll_effect()などを持ってきたら、以前通りの挙動になりました。

Answer 2

slickのセットアップ処理をどのタイミングでどこでやってるかが示されてないので正しいかわからないですが、要は、「ロゴを1.3秒後に消す > containerを1.5秒後に出す」のように 秒数でなんとかコントロールしようとしているのが良くないんだと思います。
(containerにappearが付く前にslick初期化が走っているということではないかと。)

$(window).on('load', function(){
  $(".loading-logo").delay(1300).fadeOut('slow', function() {
    $('.container').addClass('appear');
    $('.slider').slick();
  })
})

ロゴのフェイドアウトのコールバックでコンテナ表示とslickセットアップを行えば上手くいくんじゃないでしょうか。