JavaScriptでスライドショーなどを表示している場合、表示する画像の読み込みが遅くてサイトトップが変になる時などに便利なやり方のご紹介。
大きな画像を使ったスライドショーを作る時など重宝します。
あ、jQueryを使ってます。
imagesloaded で画像の読み込み後にスライドショーを実行する
imagesloaded.jsを以下のサイトからダウンロード。
・desandro/imagesloaded · GitHub
imagesloaded.js、imagesloaded.pkgd.js、imagesloaded.pkgd.min.jsのどれか１つでOK。
HTML / header
スライドショーで必要なcssは、JavaScriptの前に読み込ませておきましょう。
jQuery、imagesloaded、の順に読み込ませ、その後に実行するスライドショーなどの記述を書いたファイル（上記ではfunction.js）を読み込みます。
HTML / body
CSS / slide.css
JavaScript / function.js
cssとjavascriptの解説
スライドショーとしてはわりとシンプルな作りで、activeを指定されたところから順にクラスが移動していく感じです。
全てのliとローディング画像が全部重なっていて、クラスが変わることで表示非表示（z-indexが入れ替わる）しています。
設定のリンクを指定すると、スライドにリンクが貼れます。
現在は全部「#」を指定してます。リンクが必要ない時は何も記入しなければOK。
現在はスライドがリピートするようになってますが、function.jsの33行め、SlideEle(‘slide’,’li’,’1′)の最後の「1」を「0」にすると最後の画像で止まるようになっています。
サンプル
実際のサンプルはこちら
loadingバーは、Ajaxload、写真素材はPAKUTASO/ぱくたそからお借りしました。
画像を大きく使ったスライドショーなんかも増えてるので、知っておくと便利だと思いますよ＠・ェ・＠
