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