-
ID:ShwsJM さんの質問

Webサイト読み込み時のローディング画面について


  • http://gimmicklog.main.jp/jquery/278/

  • 上記サイトなどを参考に、ローディング画面を作っているのですが、
    jsが使えない環境を考慮し、ローディング画面自体をまずCSSで非表示にし、
    その後jQueryで表示している(と思う)のですが、
    jQueryが読み込まれる前に、一瞬「ロード後に表示させたい内容」が見えてしまいます。

  • 皆さんはローディング画面をコーディングするとき、
    どのようにしているのでしょうか?

  • よく使うテンプレート的な処理や、ベスト・プラクティスなど教えて頂けますと幸いです。

みんなの回答 3 件

ID:Uj0FA4 さんの回答

別にjQueryに限らず、CSSでも画像でも回線状況によってはロード後に表示させたい内容が一瞬見える事はあるよ。
絶対にそうしたくないのなら、Ajaxで全部読み込んでから内容を表示するべきだけど、それはSEO的にもよくないし手間だわな。
ま、「気にするな」ってことだ。参考サイトのとおりにしておけばいい。

ID:ShwsJM

回答ありがとうございます。
>Ajaxで全部読み込んでから内容を表示する
そういう手もあるのですね!でもjs切っている環境だとダメですね・・・

ID:mMGVXZ さんの回答

本体をcssで非表示にさせて、読み込み後にjsで表示させればいいんじゃない?

ID:wvFlb2

それだとJSを切ってる環境では見えなくなるっつってんじゃん。でもまぁ、そういう環境は無視すればいいだろとも思う。

ID:ShwsJM

>本体をcssで非表示にさせて、読み込み後にjsで表示させればいいんじゃない?
他の方が回答してくれておりますが、jsをきっている環境を一応考慮しています。
>そういう環境は無視すればいいだろとも思う。
実際みなさんは無視していますかね?
ローディング画面は今後も頻繁に作ると思うので、
テンプレートを作成したいと思っています。

ID:wvFlb2

CSSだけ生かしてJS切ってる人なんざ特殊だろう。俺ならバッサリ切り捨てる。音声ブラウザに対応したいなら別だが。ていうか display:none 要素に対して音声ブラウザってどう動作するんだろう…。

ID:v5teO2

JS切ってる環境考慮してるならローディング完了後の状態変化はどうやってやるの?

ID:wvFlb2

↑だからローディングそのものをやらないってこったろ。読解力どうした?捨てたんか?

ID:ShwsJM

>JS切ってる環境考慮してるならローディング完了後の状態変化はどうやってやるの?
説明が下手で申し訳ないです。
JS切っている環境の場合、ローディングのエリアはCSSで非表示にしているので、wvFlb2iF8sWxさんが言っているように、ローディングそのものをやらないってことです。

ID:ShwsJM

CSSだけ生かしてJS切ってる人なんざ特殊だろう。俺ならバッサリ切り捨てる。
>確かに仰るとおりだと思います。
Modernizr使えばできる気がしてきましたが、
それはそれでやり過ぎな感じもしますね。

ID:mMGVXZ

俺ならJS切った環境を考慮するサイトでローディング表示なんてしない。これいっちゃうと元も子もないけど。

ID:kwHqTD

↑マサニソレ

ID:7X1bNB さんの回答

noscriptの中にcss書いてみるとか。やったことないけど。

ID:ShwsJM

自分ではでてこなった発想!
ちょっと実験してみましたが、<noscript>タグの中に<style>タグを記述すると、普通にテキストとして表示されてしまいました...orz

ID:fSU6ke

html5ならnoscriptで外部ファイルを読み込めるとか…。
ttp://terkel.jp/archives/2012/07/styles-for-noscript/

最終更新日:2016-05-23 (5,083 views)

関連するトピックス

ページ上部に戻る