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","");
スポンサーサイト

はてなブックマークに追加 はてなブックマーク - Ajaxを使ったページ遷移なしのスライドショー補足

theme : JavaScript
genre : コンピュータ

comment

Secret

プロフィール

ok.2nd

Author:ok.2nd
HomePage:
http://ok2nd.web.fc2.com/
Email: m.ok.2nd@gmail.com

最新記事
最新コメント
最新トラックバック
月別アーカイブ
FC2ブログランキング

FC2Blog Ranking

検索フォーム
カテゴリ
リンク
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
ユーザータグ