中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

Ajaxを使ったページ遷移なしのスライドショー補足

MyHome Portal Ver.2.59で追加したAjaxを使ったページ遷移なしのスライドショーについての補足です。

ページ遷移なしのスライドショーと言っても、全画像をあらかじめ読み込んで切り替えている訳ではありません。任意のフォルダの数十枚、数百枚の画像のスライドショーを実現するのに、その方式は現実的ではありません。順次、次に表示する画像を読み込みながら、スライドショーを行なっています。

画像の読み込みは、jQueryを使って行なっています。

$("#img_slide_main_"+c_p).attr("src", "img-get.php?page="+nxt);

ただ、フェードアウト・フェードインと組み合わせる場合、フェードアウトしてから、次の画像を.attr()で指定して読み込んでもフェードイン開始に間に合わず、おかしな動作になってしまいます。そこで、<img>タグを2つ用意して、

<img id="img_slide_main_0" ..... >

<img id="img_slide_main_1" ..... >

スライドショーの時間間隔を空けるためのsetTimeout()をする前に、次の画像を事前にもう一つの<img>タグに.attr()で読み込み、2つの<img>タグを交互に切り替えて使っています。

$("#img_slide_main_"+c_p).css("display","none");

$("#img_slide_main_"+a_p).css("display","");