こんにちは、永井です。
最近はなかなか多忙な日々を送っており、業務で手一杯になってしまうので 何か＋αできるように頑張っていきたいと思います。
さて今回は、業務中に困ったことがあったので、それについて書きたいと思います。
追従メニューが最後まで動きません
javascriptで画面スクロールに追従するメニューを設置したのですが、 意図しない中途半端な位置で追従が止まるという挙動になり困りました。
原因
意図しない誤動作の原因とは、ウィンドウの高さの取得などを行い、 追従のプログラムを組んだのですが、その際に値が正しく取得できていなかったためでした。 なぜ正しく取得できなかったかというと、ページ内のコンテンツに画像が複数設定されており、 その画像の高さが定義されておらず、その影響でウィンドウの高さが正しく取得できなかったようです。
解決策
結果から述べますと、"読み込みのタイミング"を変えることで解決できました。 最初はjQueryのお約束の
$(function(){ ここにプログラムを書き書き... });
としていたところを
$(window).load(function(){ こっちにプログラムを書き書き... });
と読み込みのタイミングを変えることで、キチンと最後まで追従するようになりました。
$(function(){})と$(window).load(function(){})の違い
正直なところよくわかっておらず、どちらもそこまで違いがないものと思い込んでおりました。 そこでGoogle先生にご相談したところ、ざっくり述べると、
$(function(){})は、HTMLの構築が完了した時点で処理を実行する。 $(window).load(function(){})は、HTMLの構築だけでなく、画像やFlashなどのデータの読み込みが完了してから処理を実行する。
だそうで、$(window).load(function(){})内ににプログラムを書くことで、コンテンツ内の画像データも含めて ウィンドウの高さなどを取得することができるようになり、解決につながりました。
注意点
ただし、$(window).load(function(){})には注意すべき点があります。 それは、”画像やFlashなどのデータの読み込みが完了してから”なので、使用箇所、使用機能によっては ユーザーは反応が遅く感じてしまうことがあると思われるので、 その辺りは、実際にテストを行い考慮していく必要がありそうです。
まとめ
普段は気にせず$(function(){})内に書き込んでいましたが、プログラムによっては 読み込みのタイミングを考慮する必要があるとわかりました。 また、できたから良いのではなく、機能の反応のユーザー体験(ユーザーエクスペリエンス)を 考えるということも大事なのだと思いました。