flexsliderを読み込むと一瞬、高さが死んで表示が崩れるのを直した

flexslider便利ですよね。
よく使ってるんですが、最近のサイトってレスポンシブ仕様じゃないですか？
flexsliderのheightを固定できないため、読み込む一瞬だけ高さが死んで表示が崩れるのが気になってました。

これをjsとダミー画像の読み込みで回避したのでソースをメモしておきます。

やってること

スライダーで表示する「1枚目の画像」を「別途表示」し「ダミー画像」として使用します。
「スライダー領域の高さの確保」が目的です。

読み込み中の賑やかしにもなります。

スライダーが表示されたらダミー画像はjsで無効化します。

HTML

リストの前にpタグで囲ったダミー画像を挿入します。
スライダーの1枚目の画像と同じものです。

pタグにはclass="loading"を指定しておきます。

<div class="flexslider">
	<!-- ダミー画像 -->
	<p class="loading"><img src="●1枚目の画像のパス●"></p>
	<!-- スライダー画像 -->
	<ul class="slides">
		<li><img src="●1枚目の画像のパス●"></li>
		<li><img src="●2枚目の画像のパス●"></li>
		<li><img src="●3枚目の画像のパス●"></li>
	</ul>
</div>

JS

flexsliderのオプションはお好みで調整してください。

flexsliderの画像が表示されたら、もうダミー画像はいりません。

pタグにCSSのposition:absolute;をあてて、高さを殺します。
その後、1秒かけてフェードアウトさせます。

<script>
	// スライダー
	$(window).on("load", function() {
		$('.flexslider').flexslider({
			// flexsliderのオプション
			controlNav: false ,
			directionNav: false ,
			slideshowSpeed: 4000,
			animationSpeed: 500
		});
		// ダミー画像を無効化
		$('.loading').css('position', 'absolute');
		$('.loading').fadeOut(1000);
	});
</script>

本当は「flexsliderの表示が完了したら」→「ダミー画像を無効化」みたいにしたほうがいいんでしょう。

けどJSはまったく分からないので「fadeOutを1秒」にすることでお茶を濁しています。
1秒以内には読み込み終わるでしょ……ってことで。

詳しい人いたらコメントで書き方おしえてください。

ちなみにWordPressならHTML部分はこう

最新5件のアイキャッチ画像をリンクつきでflexsliderにしています。

<div class="flexslider">

	<!-- ダミー画像 -->
	<?php
		$args = array(
			'posts_per_page' => 1
		);
		$posts = get_posts( $args );
		foreach ( $posts as $post ):
			setup_postdata( $post );
	?>
	<p class="loading"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></p>
	<?php endforeach; ?>
	
	<ul class="slides">
		<!-- スライダー画像 -->
		<?php
			$args = array(
				'posts_per_page' => 5 // スライダーの表示件数
			);
			$posts = get_posts( $args );
			foreach ( $posts as $post ): 
				setup_postdata( $post );
		?>
		<li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a></li>
		<?php endforeach; ?>
	</ul>
	
</div>