Q&A
該当ページのソースコード（HTML、CSS、JavaScript）を提示してください。
前提・実現したいこと
WordPress内でプラグイン(CSVtoHTML)を使ってCSVを読み込んでいます。
ページが読み込まれた際にテーブルが非表示になるようにJavaScriptで非表示に切り替えています。
結果としてはちゃんと非表示にはなっているのですが、ページが表示される一瞬だけテーブルが表示されてしまいます。
試したこと
・fadeOutメソッドの使用(サイト参照)
・CSSの.view_timerをdipslay:none(サイト参照)
・JavaScriptを使用せず、該当要素にCSSで直接非表示設定
・キャッシュのクリア
上記全て試しましたがどれもうまくはいかず毎回一瞬だけ表示されてしまいます。
どうしたら一瞬のちらつきなくページ表示ができるのでしょうか？
###追記
html
1<head> 2 <meta charset="utf-8"/> 3 <script src="/JavaScriptファイルが格納されているパス/display.js"></script> 4</head> 5<table id="recruit_table" class="csvtohtml"> 6 <thead> 7 <tr class="headers"> 8 <th class="colset colset-1">施設名</th> 9 <th class="colset colset-2">給与形態</th> 10 </tr> 11 </thead> 12 <tbody> 13 <tr class="rowset odd rowset-1"> 14 <td class="colset colset-1">鎌倉株式会社</td> 15 <td class="colset colset-2"><span class="full">フルタイム</span></td> 16 </tr> 17 <tr class="rowset even rowset-2"> 18 <td class="colset colset-1">横須賀株式会社</td> 19 <td class="colset colset-2"><span class="part">パートタイム</span></td> 20 21 </tr> 22 <tr class="rowset odd rowset-3"> 23 <td class="colset colset-1">三浦株式会社</td> 24 <td class="colset colset-2"><span class="full">フルタイム</span></td> 25 <tr class="rowset even rowset-4"> 26 <td class="colset colset-1">逗子株式会社</td> 27 <td class="colset colset-2"><span class="full">フルタイム</span></td> 28 </tr> 29 <tr class="rowset odd rowset-5"> 30 <td class="colset colset-1">厚木株式会社</td> 31 <td class="colset colset-2"><span class="part">パートタイム</span></td> 32 </tr> 33 <tr class="rowset even rowset-6"> 34 <td class="colset colset-1">綾瀬株式会社</td> 35 <td class="colset colset-2"><span class="part">パートタイム</span></td> 36 </tr> 37 <tr class="rowset odd rowset-7"> 38 <td class="colset colset-1">横浜株式会社</td> 39 <td class="colset colset-2"><span class="full">フルタイム</span></td> 40 </tr> 41 <tr class="rowset even rowset-8"> 42 <td class="colset colset-1">藤沢株式会社</td> 43 <td class="colset colset-2"><span class="part">パートタイム</span></td> 44 </tr> 45 </tbody> 46</table>
CSS
1.view_timer{ 2 display:none; 3}
JavaScript
1 let table = document.getElementsByClassName("rowset"); 2 for(let i = 0; i < table.length; i++){ 3 table[i].style.display = "none"; 4 }
テーブルはCSVを使用してプラグインで読み込んでいるためテーブル内のタグやクラス、idなどはコチラで弄ることができません。
提示させていただいたコードはブラウザのページソースの表示からコピペしたものになります。
試した内容の3つ目に関しては実現できなかったためコードから該当コードを削除しある状態です。
回答3件
0
JavaScriptで非表示に切り替えています。
「WordPressはサブリソース(.css/.js)の読み込みが多いブログ系CMS」の印象を持っていますが、「JavaScriptで非表示に切り替える実装」だと、DOMContentLoaded 発火までに時間が掛かるときに一瞬表示されてしまうのだと思います。
他の回答者様も揃って述べられているように、CSSで非表示がデフォルトとなるようにしておき、JavaScriptは「必要箇所を表示に切り替える実装(非表示用のクラスを取り除くなど)」にしてみてはいかがでしょうか。
投稿2020/03/25 03:33
総合スコア5434
0
ベストアンサー
非表示にしたいのはテーブル全体でしょうか。
だとしたら、下記のCSSを試してみてください。
css
1#recruit_table { 2 display: none; 3}
ただ、コードを見ると rowset(ヘッダー以外の行)を非表示にしてますね。
もし、ヘッダー行は表示させて、それ以外の行を非表示にしたいのなら下記のCSSを試してみてください。
css
1#recruit_table .rowset { 2 display: none; 3}
投稿2020/03/25 03:06
総合スコア34075
0
PHPはともかくWordPressには明るくないのでこれが実現容易かどうか分かりませんが、対象要素の外に親要素としてdivとかを作っておいて囲み、その親をdisplay:noneにしておくとかはどうでしょう？
投稿2020/03/24 09:01
総合スコア80875
あなたの回答
tips
プレビュー
