WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
ローディング画像を表示できるプラグインに細部のアップデートを行いました。対策した現象はローディングが表示される寸前にウェブサイト全体が表示されるといった読み込まれるタイミングの微調整です。
下記でご紹介させていただきます。
ページ読込みで切り替わる瞬間に一瞬全体が表示する現象を防ぐ方法
実際の画面をご確認いただければイメージしやすいかもしれません。念のためスクリーンショットでループ表示にしているのでページが切り替わるタイミングで全体が先に読み込まれる状態をチェックください。
下記の参考イメージはファイルが重たくならないように短くループしています。トップページから記事へ入った瞬間にローディング画像が表示される前から記事情報が表示されているのがわかりますよね。
ローディング画像を表示する直前に読込み先のページが一瞬だけ表示されているのはプラグインのインストールが多い環境でのみ発生いたします。各スクリプトが読み込まれる順の兼ね合いで起こる現象です。
もちろん「気にならない！」という人も多いので念入りの対策となります。
ちらつき現象の対策について
対策方法は「ローディング画像が読み込まれる直前に処理を追加」すればOK。一旦ウェブサイト全体を非表示にしておきローディング画像を実行する手前でもう一度ウェブサイト全体を表示に戻す流れですね。
ウェブサイト全体を非表示化する
まずはCSSで非表示に設定。JavaScriptが読み込まれるまでの初期状態ですね。
body {
display:none;
}ローディング画像の直前に表示を戻す
そしてJavaScriptが読み込まれたタイミングで「body」を表示に戻しましょう。
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'block';
});以上で対策が完了となります。
ローディングプラグインを更新
現在「WP Loading Gif Animations Plus」は最新バージョンが「1.1.4」なので「1.1.5」で正式対応となります。
もう少し検証作業が必要なので完了次第で更新データをお送りいたしますね。アップデートが届いたら管理画面から最新版バージョンのプラグインにワンクリックで切り替えられるのでぜひお試しくださいませ。
▼管理画面からプラグインを更新する手順
https://wp-labo.com/plugin-update/
まとめ
本日は「ページ読込み時のちらつきを解消する方法」を解説させていただきました。
ごく稀に「JavaScriptをオフ」にしてブラウザを使っている人もいるので新機能として盛り込むか悩みましたがそういった使い方をしているケースはレアなので使い心地を優先して導入を決定いたしました。
ぜひご参考ください。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
