Memo

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

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

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

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

desandro/imagesloaded · GitHub

imagesloaded.js、imagesloaded.pkgd.js、imagesloaded.pkgd.min.jsのどれか1つで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/ぱくたそからお借りしました。

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

COMMENT

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

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