[jQuery]画像読み込み後、リサイズ時、それぞれの処理の書き方（WordPress対応も）
タイミング別の記載方法をまとめてみる
jQueryを使っていると、とあるタイミングでこの処理を行わせたい！ということがあります。
その都度記載方法を探すのですが、すぐには発見できなかったり、WordPressでは仕様が違ったりと地味に手間がかかります。
そこでタイミング別、WordPressでの記載方法をまとめてみたいと思います。
通常の書き方
通常
|
1 2 3 |
$(function () { // 処理 }); |
通常（WordPress版）
|
1 2 3 4 |
jQuery(function ($) { // 処理 // 「$」を使える }); |
タイミングとしてはHTMLを読み込んだあとに処理されます。
WordPressでは「$」という文字列を別のライブラリで使用している都合上、「$」をそのまま記載してもコンフリクト（衝突）防止のため動かないようです。
そこで以下の対応を行います。
- 「$」を「jQuery」に書き換え
- 処理中は「$」を使いたいので function($){} に書き換え
画像読み込み後に処理
画像読み込み後
|
1 2 3 |
$(window).on('load', function() { // 処理 }); |
画像読み込み後（WordPress版）
|
1 2 3 |
jQuery(window).on('load', function () { // 処理 }); |
画像以外にも動画の読み込みも含まれます。
リサイズ時に処理
リサイズ時
|
1 2 3 |
$(window).on('resize', function() { // 処理 }); |
リサイズ時（WordPress版）
|
1 2 3 |
jQuery(window).on('resize', function () { // 処理 }); |
画面の高さや幅が変わった時に処理が走ります。
リサイズ時は常に処理が走るので、リサイズ後に一度だけ処理を行わせたい場合は以下の記事を参考にしてみてください。
[jQuery]リサイズに関連する記事
[jQuery]画面リサイズ時に一度だけ処理を実行させる
JavaScript
