ブラウザ間の挙動を考察？
アドベントカレンダー3日目を書いていきます。正直23時から書き始めていて間に合うかめちゃくちゃ焦ってます。2日目他の人が書いてくれてるのに、自分が穴をあけるわけにはいかないので頑張って書いていきましょう。
いきなりですが、みなさんご存じのとおりブラウザ間で実装の違いがありますよね。
特にIEではJavaScriptへの対応が遅く、ES2015で実装が決定したものなどは一部未対応なものがあり、ほかのブラウザ検証が通ってもIEで通らないことがあります。
Webフロントエンジニアに疎まれがちなIEばかり目立っていますが、ブラウザ間の挙動の違いに悩まされることはIE以外でも稀にあります。
自分が悩まされたことがあるのは、URLで外部参照して画像をモーダルウィンドウで表示する処理を書いていた時です。ChromeはJavaScriptのデバックをしやすいので、よく自分はChromeでフロントサイドの開発を行っています。そのモーダルウィンドウででの処理がChromeでは一度目から画像を表示することができるのですが、ほかのブラウザで挙動を確認してみると一度目は画像が表示されず、二度目から画像が表示されるという挙動をしました。
なぜそのような挙動をするのか考察してみます。モーダルウィンドウで表示する画像は、モーダルウィンドウが表示されなかった場合にはユーザーが見ることのない画像です。そのためchrome以外のブラウザでは実際にモーダルウィンドウが開かれるまで画像をロードしていないと思われます。そのため画像をロードする前にモーダルウィンドウが開かれてしまい画像が表示されないものと思われます。二度目以降はうまくいくことも一度目でロードされてるからということで説明することができます。
逆になぜChromeで一度目から画像を表示することができるかを考えていきます。Chromeにはまことしやかにささやかれているある噂があるのです。それは、ページ内にリンクが張られているものを先にロードすることでユーザーへのレスポンス速度を上げているというものです。ある会社の方にアクセスカウンタをJavaScriptで書いたらChromeの時だけ、アクセスカウンタが仕込まれているページが検索にヒットするだけでアクセスカウンタが動作するという話を聞いたことがあります。これもgoogleの検索ページからアクセスカウンタが仕込まれているページへのリンクが存在するため、先にロードされてしまいアクセスカウンタが反応すると考えれば説明がつきます。今回もChromeの場合にはモーダルウィンドウで表示される画像であったとしても先にロードしているため一度目から表示することができたのだと思います。
どのブラウザでも一度目から画像が正しく表示されるようにするには、onload等を用いて画像がロードされてからモーダルウィンドウを開いてあげればおーるおーけーです。
何とか日付が変わる前に書き終わったので一安心です。できる限り書き溜めとかないと最後のほうしにそーーーーーー。
