ページ読込みで切り替わる瞬間に一瞬全体が表示する現象を防ぐ方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

ローディング画像を表示できるプラグインに細部のアップデートを行いました。対策した現象はローディングが表示される寸前にウェブサイト全体が表示されるといった読み込まれるタイミングの微調整です。

下記でご紹介させていただきます。

ページ読込みで切り替わる瞬間に一瞬全体が表示する現象を防ぐ方法

実際の画面をご確認いただければイメージしやすいかもしれません。念のためスクリーンショットでループ表示にしているのでページが切り替わるタイミングで全体が先に読み込まれる状態をチェックください。

下記の参考イメージはファイルが重たくならないように短くループしています。トップページから記事へ入った瞬間にローディング画像が表示される前から記事情報が表示されているのがわかりますよね。

ローディング画像を表示する直前に読込み先のページが一瞬だけ表示されているのはプラグインのインストールが多い環境でのみ発生いたします。各スクリプトが読み込まれる順の兼ね合いで起こる現象です。

もちろん「気にならない!」という人も多いので念入りの対策となります。

ちらつき現象の対策について

対策方法は「ローディング画像が読み込まれる直前に処理を追加」すれば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してお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」 2万を超えるお客様がご使用中!

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください

ローディング画面を導入してみませんか?

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

こんなお悩みはありませんか?

・ローディング画面を表示できるプラグインを探している
・ローディング用の画像を管理画面上から差し替えたい
・ローディング画像の上に運営サイトロゴを表示させたい

当サイトではワードプレスに関する導入相談を承っています。ローディング設定専用のプラグインは以下のボタンをクリックしてご確認くださいませ。なお、ご自身でのセッティングがむずかしい方へ向けて代行設定も行なっています。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください


プラグインを手に入れる