jQuery ページ読み込み時に表示/非表示を分ける

jQueryを使ってて、ちょっと動作がおかしくなった箇所があったので、そこの備忘録。

改善したい挙動

リロード時に、非表示にしているところが一瞬出る

jQueryでhide()、show()を使ってロード時に処理を分けていたが、一瞬だけ非表示にしておきたいフォームが出てしまって、なんとも不格好な感じになってしまっていたので、どうしたらいいだろうと思っていた。処理が遅かったりすると、はっきりわかってしまったのでマズイなあと。

jQueyが読み込まれるタイミング

読み込まれるタイミングはいくつかある。

⓵　HTMLが読み込まれたとき　$(document).ready（あるいは$(function()、jQuery(function)）
②　画像などコンテンツ全体が読み込まれたとき　$(window).load

https://qiita.com/katsunory/items/3ba4683629333b94b2be（最終閲覧2020/05/30）

基本は⓵を使い、タイミングを変えたいときとかは②を使うというように、処理によって使い分ける。はじめはこの辺りの読み込みのタイミングで、表示/非表示が上手く出てないのかと思っていたが、これらを変更しても特に変わらなかったので、別なところだと思った。

display: none

ググっていて参考になるものはないか探していて、以下が出てきた。

cf, 【jQuery】ページ読み込み時、本来隠れる部分が一瞬だけ表示される事象への簡単対策(最終閲覧2020/05/30)

記事自体は2014年と古いが、参考にして試したところ問題なく意図した通りに動作した。
まず、予めcssの方で非表示にしておく。この点はJSの方で最初非表示にしていたのだが、cssの方に変えてみた。display: none;で非表示にしておく。

#himaIse {
    display: none;
}

fadeIn()、show()

表示させるにはfadeIn()を使う。瞬時に表示させたいので、0にすれば例えばクリックイベントですぐに切り替わるようになる。show()についても、オプションで時間を変えたりすれば問題なかったのかもしれない。ここはfadeIn()でいけたが、show()でも問題無さそう。

$(function() {
    $('#himaIse').fadeIn(0);

バリデーションチェックエラーやリロード、ブラウザバック時にとりあえず意図した通りに動いたので、問題は無さそうだ。だが、各々、自分が使用する環境に応じて使い分けてほしい。

結論

cssの方を変えたが、JSだけでできるやり方もあると思う。
自分の環境にあった使用方法を。