slick.jsの実行は画像読み込みが終わってから

カルーセル画像のライブラリとしては slick.js が個人的な定番になっています。

jquery を使っているので実行は

$(function(){
});

の中に記述していたのですが、画像の点数が多かったりして読み込みに時間がかかってしまうと JavaScript での横幅の計算に支障が起きるようで表示が崩れてしまうことがあります。

ということで slick.js はページの読み込みが全て終わってから行うように

$(window).load(function() {
});

の中に記述するようにしました。
更にいうとカルーセル部分は最初は display: none; にしておいて、slick.js の実行が完了したら表示するようにすればよりユーザビリティを高くすることができますね。

常識レベルの内容かもしれないですが自分への戒めの意味も込めて記録として残しておきます。