スライダー読み込み時にすべての画像が縦に並んでしまう問題を解決

トップページなどでスライダーをよく使用していると思いますが、Retina対応だとか、画面幅いっぱいの画像などを使っていると、読み込み時、一瞬スライドするはずの画像全部が縦に並んでしまうことがあります。
今回はこの問題を解決していきましょう。

スポンサードリンク

以下icons8からloaderをダウンロードします。(商用無料です。)

https://icons8.com/preloaders

こんな感じで。SVGにしてみました。

 

そしてこんな感じ。(WordPressで作ってます。)

jQueryをインストールしてないひとはCDNなり何なりで。

 

SCSSはこう。

 

JSはこう(WPデフォルトのjQueryを使用しております。).sliderはスライダーを囲んでいるDIVです。

以上で、スライダーが全部読み込まれるまで、くるくるとアイコンが回ります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください