jQueryで画像が読み込まれた後実行するスライドショー

jQueryで画像が読み込まれた後実行するスライドショー

2014年5月9日
Memo

JavaScriptでスライドショーなどを表示している場合、表示する画像の読み込みが遅くてサイトトップが変になる時などに便利なやり方のご紹介。
大きな画像を使ったスライドショーを作る時など重宝します。
あ、jQueryを使ってます。

［Ad］

Contents

imagesloaded で画像の読み込み後にスライドショーを実行する

imagesloaded.jsを以下のサイトからダウンロード。

・desandro/imagesloaded · GitHub

imagesloaded.js、imagesloaded.pkgd.js、imagesloaded.pkgd.min.jsのどれか１つでOK。

HTML / header

<!-- HTML header内 -->
<link rel="stylesheet" type="text/css" href="css/slide.css" /> <!-- スライドショーで必要なcss -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/imagesloaded.pkgd.js"></script>
<script type="text/javascript" src="js/function.js"></script>

スライドショーで必要なcssは、JavaScriptの前に読み込ませておきましょう。
jQuery、imagesloaded、の順に読み込ませ、その後に実行するスライドショーなどの記述を書いたファイル（上記ではfunction.js）を読み込みます。

HTML / body

<!-- HTML body内 -->
<div id="slide">
<p><img src="slideImg/loading.gif" /></p>
<ul>
<li class="active"><img src="slideImg/slide01.jpg" /></li>
<li><img src="slideImg/slide02.jpg" /></li>
<li><img src="slideImg/slide03.jpg" /></li>
<li><img src="slideImg/slide04.jpg" /></li>
<li><img src="slideImg/slide05.jpg" /></li>
</ul>
</div>

CSS / slide.css

/* slide.css内 */
#slide{
	padding:0px;
	margin:15px;
	width:730px;
	height:500px;
	overflow:hidden;
	position:relative;
	border:2px dotted #ccc;
}
#slide p{
	position:absolute;
	top:0px;
	left:0px;
	width:730px;
	height:500px;
	z-index:20;
	background-color:#eee;
	text-align:center;
	padding-top:200px;
}
#slide ul{
	margin: 0px;
	padding: 0px;
}
#slide ul li{
	position:absolute;
	top:0px;
	left:0px;
	width:1000px;
	height:400px;
	list-style:none;
	text-align:center;
	margin:0;
	padding:0;
	z-index:8;
}
#slide ul li img{
	display:none;
}
#slide ul li.active{
	z-index:10;
}
#slide ul li.last-active{
	z-index:9;
}

JavaScript / function.js

//function.js内
// --- 設定ここから --- //

// リンク
var link1 = '#';
var link2 = '#';
var link3 = '#';
var link4 = '#';
var link5 = '#';

//画像の表示時間（1000 = 1秒）
var distime = 4000;

//フェード時間（1000 = 1秒）
var feadSp = 2000;

// --- 設定ここまで --- //

var linkArray = [link1, link2, link3, link4, link5];

$(function(){
	$('#slide li').each(function(i,ele){
		var htmlStr = $(ele).html();
		if(linkArray[i] == ''){
			$(ele).html(htmlStr);
		}else{
			$(ele).html("<a href="+ linkArray[i] +">"+ htmlStr +"</a>");
		}
	});
	$('#slide li img').imagesLoaded( function() {
		$('#slide p img').fadeOut(1000,function() {$('#slide p').fadeOut(1000);});
		$('#slide li img').css('display','block');
		setInterval("SlideEle('slide','li','1')",distime);
	});
});

function SlideEle(BoxID, TagsName, repeat){
	var $active = $('#'+ BoxID +' '+ TagsName +'.active');
	if(repeat > 0){
		if($active.length == 0){$active = $('#'+ BoxID +' '+ TagsName +':last');}
		if($active.next().length){var $next = $active.next();
		}else{var $next = $('#'+ BoxID +' '+ TagsName +':first');}
	}else{
		if($active.next().length){var $next = $active.next();
		}else{return false;}
	}

	if(repeat > 0){$active.addClass('last-active');}else{$active.removeClass('active').addClass('last-active');}
	$next.css({opacity:0}).addClass('active')
	.animate({opacity:1}, feadSp, function(){if(repeat > 0){$active.removeClass('active last-active')}else{return false;}})
}

cssとjavascriptの解説

スライドショーとしてはわりとシンプルな作りで、activeを指定されたところから順にクラスが移動していく感じです。
全てのliとローディング画像が全部重なっていて、クラスが変わることで表示非表示（z-indexが入れ替わる）しています。

設定のリンクを指定すると、スライドにリンクが貼れます。
現在は全部「#」を指定してます。リンクが必要ない時は何も記入しなければOK。

現在はスライドがリピートするようになってますが、function.jsの33行め、SlideEle(‘slide’,’li’,’1′)の最後の「1」を「0」にすると最後の画像で止まるようになっています。

サンプル

実際のサンプルはこちら

loadingバーは、Ajaxload、写真素材はPAKUTASO/ぱくたそからお借りしました。

画像を大きく使ったスライドショーなんかも増えてるので、知っておくと便利だと思いますよ＠・ェ・＠