暑いですね。夏といえば怪談ですよ。
今回は、
僕自身がずっと野放しにしていた問題を、
あまりにあっけなく解決できたことを、
自戒の念を込めて書こうと思います。
そう、、
その問題とは、ずばりこれです。
ページを表示したあと一瞬だけ、テキスト表示がガタついている！
上記動画内のページは本サイトの前回の記事だが、ページを表示したあと一瞬だけ、テキストがガタついている。
本サイトは最近、フォントにGoogle Fontの”Noto Sans JP”を使用し出したのだが、AdobeフォントやGoogle Fontでロードして表示する日本語Webフォントは、容量が大きいために、このようにページロード後に遅延読み込みされる。
遅延読み込みされるようにAdobeとGoogleが計らってくれている。遅延読み込みでないと、ページ表示がされるまでにもっと時間がかかるのだろう。
回避策！その1
この現象を回避したいと思い、回避策として、ページローディングアニメーションを思いついた。
読み込みが遅いページに使われる常套手段で、ページが完全にロードされるまで、画面全体を覆うスクリーンを表示し、その上に容量が最小限の画像やテキストで、ロード時間を楽しませるようにアニメーションなどをあしらう、あれだ。
だが、この方法よりもっといい方法があった！
回避策！その2
早速実装した。その結果が以下だ。
お分かり頂けただろうか。（わからなかった方はもう一度。。セルフで。。）
ページが表示された時には、すでにWebフォントが読み込み完了しており、ガタつかない。
これを実現したのは、
この記事で紹介されている以下のCSSコード。
html {
visibility: hidden;
}
html.wf-active {
visibility: visible;
}Webフォントが読み込まれ完了した後に、htmlタグに.wf-activeというclassが挿入される仕組みを利用し、上記のようなCSSを使うことで、ちらつきを防ぐことができるということでした。
なんじゃそら！著者様のこの貴重な記事からコードを拝借させていただきました。
回避策！その2の改良版も！
どうやら、このソースを他の方も参考にしていたようで、
ここでもソースをリスペクトした上で、更に改良を加えたコードを紹介していますので、参考までに。
いや～ほんとハックですよハック。。やはりコーディング、プログラミングはハックの頭が重要ですな。。
怪談どっかいってましたね！夏こそ涼しくなる夜に活動するのもアリですよ！
以上です！