宮崎のWEB制作アドエス

ページ読み込み時にchromeがチラチラした話

2016.02.18

どうもこんにちは。
誰も気づかないくらいに少しずつサイトをいじってます。

アドエスです。

 

とは言っても見た目的には一部webフォントに変えてみたり、シングルページにサイドバーを追加してみたり(PCだけ)、広告を増やしてみたりといった微カスタマイズですが。

これは来るべき大型リニューアルに向けての布石なのです!

 

そんな中、ある現象が発生しました。というかしています。
それは「ページ読み込み時にchromeがチラチラする」という変な現象です。

 

具体的にはページ遷移した時に一瞬ページが表示されて、すぐ真っ白になってまたページが表示されるという現象です。(チラッとなります)
safariやfirefoxでは問題ないのにchromeでは発生。ついでにIEも発生。

一度読み込んだものを再表示してるかのような動きです。

 

むむむ。

 

プラグインかな?といくつか停止して確認しても見つからず。。。

FOUTかな?とWebFont Loaderを使ってみるが変わらず。。。

※FOUT:webフォントを使っているページでwebフォントを読み込むまでの間、そのPCに入っているフォントで表示し、webフォント読み込み完了時にフォントが置き換わるために起こる一瞬のフラッシュ現象

adsenseの設定を間違ったのかな?と広告を止めてみたりしたけれど改善されず。。。

 

 

これは長期戦かな。

覚悟を決めかけたその時、あることを思い出したのです!

 

 

それは今から1年半ほど時をさかのぼります。
当時まだ開業して半年くらい。

そう、このテーマを作成した時のことです。
トップページにLoading画面を入れてみよう!と思い立ってjsをゴリゴリ。
どうにかトップページ表示時にLoading画面を入れることができ、web制作屋さんの実力をいかんなく発揮したのでした!

 

 

だがしかし、
条件指定(トップページでだけ実行)がうまくできておらず、それが全ページで読み込まれてたのでした!

というわけで、jsに条件をつけてやることで解決したのでした。
(事象が発生しなくなったのでおそらくこれが原因かと思われます…たぶん)

 

 

 

まとめ

失敗は成功のもと