Skip to content
さきどりふぁくとり~
  • Webマーケティング
  • WordPress
  • SEO
  • YouTube
  • お問い合わせ
  • 求人情報

【WordPress対応】jQueryを読み込まないときは実行順序が違うかも?

更新日:2021年9月15日
  • jQueryを使って要素に高さや横幅などを設定したいが何故が設定できない。
  • jQueryは動作しているのにタグにスタイルが反映されない。
このような内容でお困りではないですか? この記事では、jQueryを使い始めたばかりの頃に陥るjQueryの読み込み順序について解説したいと思います。 この記事を読むことで、jQueryとHTMLの読み込み順序が理解できるのでワンランク上のコーディングが出来るようになります。

目次

  • 1 jQueryを読み込まないときは実行順序が違うかも
  • 2 問題
  • 3 ページの読み込み順序
  • 4 結論

jQueryを読み込まないときは実行順序が違うかも

何でもかんでも
jQuery(document).ready(function(){
  //処理
});
初めたばかりの頃はどの関数から実行されるのかを意識せずに書き進めていることが結構あります。 読み込めないから諦めることもしばしばあるかもしれませんね。 この記事でそのようなことが無いようにしっかりと実行順序について確認してみて下さい。

問題

以下のjQueryの書き方はそれぞれどのような順番で実行されるでしょうか?
jQuery(function(){
  //処理
});
jQuery(function(){
  //処理
});
jQuery(document).ready(function(){
  //処理
});
正解は全部同じです。 次にこちらはどうでしょうか?
jQuery(window).load(function(){
  //処理
});
正解はHPが読み込まれた後に実行されます。

ページの読み込み順序

WordPressでは以下の順番でHPが読み込まれてゆきます。
    • WordPressのphpがロードされる
    • HTMLの読み込み(DOM)が終わる
    • jQuery(document).readyが実行される
    • 画像など含めすべてのコンテンツの読み込みが終わる
    • jQuery(window).loadが実行される

結論

画像等の大きさを指定するときはコンテンツのすべてが読み込み終わった後に実行される
jQuery(window).load(function(){
  //処理
});
こちらを利用して処理を書くとうまくいきます。

カテゴリー

  • AWS (3)
  • SEO (50)
  • SNS (16)
    • Facebook (7)
  • Webマーケティング (38)
  • WordPress (62)
  • YouTube (43)
  • プライバシー・ポリシー (1)
  • 未分類 (2)

プロフィール

ブログ運営・執筆または監修:
株式会社ルミナスネットワークス
https://www.luminous-networks.co.jp

代表取締役:生田 寿行

Webページ制作およびWebアプリケーションの設計~製造に至るまでをすべて通貫して行う独立系SIerです。
弊社はWebマーケティングに強いSIerとしての地位目指し、WEBページを制作することだけでなく、その先のWebマーケティングにも関係する内容を取り扱うことで、高いコストを掛けて制作したWEBページが無駄にならないようお客様を導くことを目標としております。 YouTubeマーケティングやその他SNSについても幅広い知見をもとにお客様をサポートして参ります。

本ブログで記載している内容は、必要に応じて環境を構築し、実際に調査・検証を行っており、より再現性・統計的な正当性の高いデータを目指したものとなっております。
参考にして頂けましたら幸いです。

投稿されている記事に関しまして、もっと深く知りたいという事がございましたら、無料で相談を受け付けておりますのでご遠慮無くお問い合わせください。

お仕事のご依頼・お問い合わせ

目次

  • 1 jQueryを読み込まないときは実行順序が違うかも
  • 2 問題
  • 3 ページの読み込み順序
  • 4 結論
© 2023 さきどりふぁくとり~