- ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:JS読み込み場所について)
JS読み込み場所について
このQ&Aのポイント
- <script>要素を記述する場所は、大きく以下のように分類できます。...
- 同じJSファイル内であれば関数の定義と呼び出しは順番はどちらでも良いが、別ファイルとして<script>タグで読み込む場合は定義が入ったファイルが呼び出しのファイルより先に記載されていないといけないということでしょうか?
- たとえば、<body>要素の配下で呼び出す必要があるような関数は、<head>要素の配下で事前に読み込んでおく必要があります。 これは具体的にどんなケースだと思いますか?sectionなどのbody内の要素の高さをjqueryで取得設定するときなどで消化? ・最後に良くCSSを当てるjsがDOMを読み込み終わってから実行されてガッタンとなることがあるのですが、このような場合はどこに書くべきなのでしょうか?
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
どこに書いても良いと思う。問題はどのタイミングで実行するかでしょう。 1,jsを読み込んですぐに実行 2,htmlの構造をブラウザが把握してから実行 3,画像もぜ~んぶ読み込んで実行 jqeury 使うなら 2→ $(document).ready(function(){ //ここにやりたい処理 }); 3 → $(window).load(function(){ //ここにやりたい処理 }); と書けばどこに書いてもそのタイミングで実行されるでしょう。 >>CSSを当てるjsがDOMを読み込み終わってから実行されてガッタンとなることがある 画像を読み込んでその幅、高さを計算してってパターンであるなら、そのタイミングでしか書けないでしょう。ちょっと変更して、最初はopacityを0にしておいて見えないようにして、そのJS計算後にopacityを1にして表示すればガッタンとなったあとにしか表示されないのでガッタンとなった感じには見えないと思います。
その他の回答 (1)
- muuming2001
- ベストアンサー率23% (202/847)
回答No.2
>>これは実務でも仕方がないことと堂々とクライアントに行っても問題ないのですね。 解決策の1つを書きました。 「ガタンとなる前を見えなくして、ガタンとなった後に表示。」と 解決策はありますのでクライアントに「解決策は無い!」と突き放すのはダメだと思います。 他にも工夫するなら表示前は読み込み中的な表示をして、jsで事前に画像を読み込んで等々方法は在ると思います。
質問者
お礼
親要素もすべてhiddenにしておくということですか?大変ですね。全体がずれるのでそれだとbody事態にhiddenをつけないといけません。 nowloadingとつけておけばその裏でがったんとなっても許されるのですかね。
お礼
>> そのJS計算後にopacityを1にして表示すればガッタンとなったあとにしか表示されないのでガッタンとなった感じには見えないと思います。 やはり画像を読み込んでからサイズを変更するのでどうして高さが変更している状況が一瞬見えてしまいますよね。 これは実務でも仕方がないことと堂々とクライアントに行っても問題ないのですね。 せいぜいできることといえば小さい画像が大きくなる様子を透過して隠すことだけですね。