pace.jsと他プラグインについて組み合わせについて

Question

サイトにpace.jsでローディングを実装途中ですが、ローディング中にサイト全体を見えなくするため、
body直下のdivにdisplya:noneをかけました。

ところが、その状態でローディングすると同サイト内に実装しております、swiperとaosが動きません。

display:noneを外すとswiperとaosが動くので、jsというよりはcssの問題かとおもいます。

尚、検証ツールではエラーコードは出ておりません。

head内のコードは下記の順番です。

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pace-js@latest/pace.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pace-js@latest/pace-theme-default.min.css">
<link　rel="stylesheet"　href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"/>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<link　rel="stylesheet"　href="https://unpkg.com/swiper/swiper-bundle.min.css"/>

swiperとaosが動く方法を教えてください。

Answer 1

swiperやaosが初期化時に要素の位置やサイズを取得しようとしているが、位置が無いので失敗しているのかもしれません。
隠す方法として、非表示にするのではなく、白い要素をかぶせるようにしてどうでしょうか。

//body内に追加、ローディング時にはクラス名.state_loadingを付与
<div class="loading_overlay">

<style>
.loading_overlay{
	position: fixed;
	z-index: 99;/*pace.jsの要素より下になるように調節ください*/
	background-color: #fff;
	display: hide;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.loading_overlay.state_loading{
	display: block;
}
</style>

Comments

[northvillage]

ありがとうございました！無事実装できました！