お問い合わせはコチラから

CSSが適用されるタイミングが遅い場合の原因

サイト運営

サイトのメインビジュアルで使用されるスライダーは背景画像になっていることが多いです。表示を調整したい場合には、背景画像に適用されているCSSを書き換えるのが一般的でしょう。

先日、スライダー画像の表示位置を少しずらそうと思ったときに、CSSの適用にタイムラグがあって一瞬がたつく現象に出くわしました。

この記事では、その時の原因と対処方法をまとめておきます。

スライダーの背景画像のCSS

変更前

li.slide.slide-1.active{
background-position: center center;
background-image: url(https://aaaa.com/img.jpg);
visibility: visible;
opacity: 1;
transition: none 0s ease 0s;
transform: translateZ(0px);
}

変更後

li.slide.slide-1.active{
background-position: center center;
background-image: url(https://aaaa.com/img.jpg);
visibility: visible;
opacity: 1;
transition: none 0s ease 0s;
transform: translateZ(0px);
background-position: 45% 50%!important;
}

原因:Javascriptで追加されるclassが遅延している

スライドが1枚しかなかったので気が付かなかったのですが、activeというclassはjavascript経由でサイトを表示した後に追加されていました。

javascriptはフッターにあることが多いので、メインビジュアルが表示された後に読み込まれて、classの追加が遅くなります。

このclassを含めたセレクタでbackgroundの位置を指定していたので、サイト読み込み時に適用されない現象になっていました。

jsで追加されるclass(.active)を含めないセレクタに変更することで期待する動きになりました。

li.slide.slide-1{
background-position: center center;
background-image: url(https://aaaa.com/img.jpg);
visibility: visible;
opacity: 1;
transition: none 0s ease 0s;
transform: translateZ(0px);
background-position: 45% 50%!important;
}

まとめ

動きが分かってしまえば、単純な話なのですが、スライダーの動きはブラックボックスのことが多いので気が付くのに時間がかかりました。

CSSが効かない場合は、セレクタを増やすことが多いのですが、今回は減らすことで対応できました。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました