プリロード画面を設定できます。
具体的な実装としては、この機能で指定した要素を、ページ内の要素の読み込み・radix.init の実行の両方が完了したタイミングで delay をかけて hide クラスを追加し非表示になるようにします。
Options
const radix = new Radix({
preload: {
active: false, // 機能のオン、オフ(boolean)
selector: '', // プリロード画面の要素(CSSセレクタ)
class: 'hide', // ロード完了後に追加するクラス
delay: 200, // 遅延(ミリ秒)
preventScroll: false // プリロード画面を表示している間スクロールを禁止するか
}
});
デフォルトでは active プロパティが false であるため、機能を利用するには true に変更する必要があります。
もしページが軽量でほとんど読み込む内容がない場合に、遅延なしでハイドアニメーションをかけると、画面がフラッシュしたようなチカチカした印象を与えます。それを避けるために、ローディング画面を最低限 0.2 秒は表示するようにデフォルトでは設定しています。
Example
このページをロードするとローディングアニメーションが表示されます(見逃した人はリロードしてください。最低でも 0.2 秒表示されます)。
オプションを変更した例はトップページです。トップページでは delay の設定が違う為、アニメーションがより長く表示されます。