[Go!]
〜 NS4.75/NS6/NS7/MSIE5/MSIE6/Firefox 〜
|
指定した画像を1枚づつ表示していくスライドショウです。
最大で６枚同時表示が可能。表示位置は
中央、右上端、左上端、中央上端、右下端、左下端、中央下端
の７ポイントを基点に、ピクセル単位で相対指定可能。 アルバムのページって、ページを下へ下へと延々とスクロールさせて 見ていく必要があったり、 クリックに次ぐクリックで ページをコリコリと捲って見ていくスタイルだったりと、 量が多いと結構見るのが面倒なものなのです (ページを作るにはIMGタグを貼っていけばいいダケなので ワリとラクに書けてしまうのだが…)。 それで、そういった IMGタグ貼りまくりページ を書いた場合は 自動スクロールさせてみたり するのですが、この方法では画像が大量にあると、 1枚のページに全部の画像を貼り付ける必要がでてきてしまいます。 ページのロード時点で全画像がサーバがらダウンロードされようとしてしまい、 「チョイ見するだけのつもりだった人」には鬱陶しく感じるかもしれません。 そんな場合の為に、大量画像の一気見せ用に、 スライドショウ形式で画像を自動表示するJavaScriptを書いてみました。 画像表示中に次の画像をロードしてくる方式なので、 全画像を一気に読み込むといったことはありません (6枚分一気読込みまではシナリオの書き方次第で可能になっていますが)。 画像の表示順序などの制御は シナリオ配列sshowScenario にコマンド登録して行います。 version2.0になります。version1.0は「こちら」。 とりあえず、サンプルをみましょう。 いきなり、このページの下にある [Print HTML]ボタン を押して、 テキストエリアにHTMLを出力します (表示する画像はsshowScenario配列に設定しますが、 最初はサンプルが適当に設定されています。 実際の使用にはこの部分を変更することになります) 。 それから、 [Display NOW!]ボタン を押して、子窓に出力されたＨＴＭＬを表示させてみます。 NS4.7x系ではこのボタンがうまく動作しない場合があるので、その場合は テキストエリアの出力をまるごとファイルに保存し、 それを別途ブラウザで表示させてください。 [Print HTML]ボタン を押す前に、 パラメータエリアのパラメータを設定することにより、 詳細な設定が可能です。 パラメータエリアには各項目にヘルプが設定されていますので、 パラメータ設定は そのヘルプを参照しながら行います。 ■ 手順 1. 「ひながた」ファイル に貼り付けて使用するので、あらかじめ「ひながた」ファイル を出力して、 適当な名前でsaveしておきます。 2. このページのパラメータエリアを設定します。 もちろん、パラメータは変更せず、そのままデフォルト値を使ってもＯＫです。 3. [Print HTML]ボタン を押し、テキストエリアにHTMLを出力します。 4. [Display NOW!]ボタンを押し、 上記 3. で出力したHTMLのイメージを確認します （ここで大体のイメージが確認できます）。 テキストエリアに出力されたHTMLを、そのままファイルにsaveし、 「上書き書換え」で使うことも可能です。 その場合は、項目 10. まで 以下の手順を飛ばしてください。 (上記 1. で出力した「ひながた」ファイル は不要になります) 5. テキストエリアに出力されたHTMLから、 スタイルシートを抜き出して 「ひながた」ファイル に貼り付けます。 貼り付け範囲は、 /* ==== SlideShow ver2.0 スタイルシート部 Cut and Paste ここから ==== */ から、 /* ==== SlideShow ver2.0 スタイルシート部 Cut and Paste ここから ==== */ の範囲になります。 6. ver1.0では、 「ひながた」ファイル で出力されていたJavaScript関数 state_misc2() の入れ替えをしていましたが、 ver2.0では不要になっています。 7. 「ひながた」ファイルに、 JavaScriptの追加をおこないます。 テキストエリアに出力されたHTMLから、JavaScript部を抜き出して、 貼り付けます。貼り付け範囲は、 //-- === SlideShow ver2.0 Cut and Paste用 JavaScript ここから === --// から、 //-- === SlideShow ver2.0 Cut and Paste用 JavaScript ここから === --// の範囲になり、これをHEAD部内のJavaScript部に追加します。 8. 「ひながた」ファイルのBODY部内に、 Layer部の追加をおこないます。 テキストエリアに出力されたHTMLから、以下の範囲、 <!-- SlideShow ver2.0 Cut and Paste用 Layer DIV部 === ここから --> から、 <!-- SlideShow ver2.0 Cut and Paste用 Layer DIV部 === ここまで --> を抜き出して、「ひながた」ファイルに 貼り付けます。 これらのDIV部が各Layerになります。 9. BODY部の最後の方にあるSCRIPT部に、 start_sshowScenario(3000); と記述します (テキストエリアに出力されたHTMLが参考になります)。 これにより、ページがロードされた時点で、スライドショウが始まります。 ここで指定しているパラメータ 3000 は画像表示間隔で、 任意の値に指定でき、数値が大きいほど表示時間が長くなります。 1秒＝1000 になります。 ここまでCut and Pasteが終われば、一旦、ファイルをsaveして、 ページをブラウザで表示させると（デフォルトのサンプル設定画像で） スライドショウのJavaScriptが動作することを確認します。 [!] サンプル設定画像は相対パス設定になっているので、 実際には画像は(リンク切れ状態になり)表示されません。 10. sshowScenarioの配列(上記 7. の手順で Cut and Pasteした中にあります)を書き換えて、表示させたい画像を設定します。 詳細はsshowScenarioの設定を参照してください。 |
||
|
■ sshowScenarioの設定 表示する画像の順番や 各画像のサイズは sshowScenario という配列で指定します。 ここで指定する画像サイズは 実際に表示されるサイズになります。 元画像のサイズと違うスケールで表示する場合は、 縦横比率を計算して指定する必要があります。 詳細は「こちら」を参照してください。 ■ 画像読み込みのチェック方法 画像読み込みのチェックは、Imageオブジェクトの completeメソッド で行っています。 判定はtrue/falseの真偽値です。 詳細は「こちら」を参照してください。 |
||
|
■ 使用例 スーパードルフィー13 (Super Dollfie 13) 深魅華(みみか) （「２７時からのエンノイア」内） |
||
|
[BACK] |
||
|
|
|
[BACK] |
|
[BACK] |
|
● シートサイズ デフォルト値のまま、変更する必要の無いパラメータです。 スライドショウで表示する画像を載せるLayer、その背景になるLayerのサイズ を指定します。 背景Layer(slideshowBacksheet)のサイズは、 ブラウザ画面全体を覆う十分なおおきさがあればＯＫです。 デフォルトの 横5000px*縦4000px で十分でしょう。 表示する画像を載せるLayerは全部で６つありますが (slideshowPictsheetA〜slideshowPictsheetF)、 それらのLayerサイズも この設定値が使用されます。 画像サイズが 横5000px*縦4000px を超えることはないと思われますので、 デフォルト値で十分です。 [BACK] |
|
● バックシート色(初期色) バックシートLayer(Layer-IDがslideshowBacksheet)の 色を指定します。 画像の背景色の指定になります。 デフォルト値として #000000 (黒) が設定されています。 このバックシートの色は スライドショウ中に (DispコマンドやExcgコマンドで) 変更することが可能です。 [BACK] |
|
● メニューLayer 設定 ブラウザ画面の右上端と左下端に [STOP](スライドショウ中断用)のリンクを設置しています。 また表示間隔延長、短縮のリンクも設置しています。 これらのリンクは メニューLayer (Layer-IDは slideshowMenusheetTop と slideshowMenusheetBottom) に置かれ、ここのパラメータではその メニューLayer の設定を指定します。 デフォルトのまま、特に変更する必要はありません。 「Layerサイズ」で このLayerの横幅と縦長をpx単位で指定できます。 背景色は「Layer背景色」で指定します。 「Layer内文字」で、 [STOP]等の文字の色(A要素のcolorプロパティの値)、 サイズ(A要素のfont-sizeプロパティの値)を指定します。 文字のサイズ(デフォルト値=13px)は Layerの縦(デフォルト値=16px)より、 ひとまわり小さく設定してください(はみ出ます)。 [BACK] |
|
● ブラウザのページスクロールバーのサイズ デフォルト(各16px)のまま 変更は不要です。 ブラウザ画面の右端、下端に表示されるページスクロールバーのサイズを設定します。 これは目安値で、正確に設定する必要はありません (というか、正確な設定はできないのですが)。 「幅」には ブラウザ画面の右端に表示されるページスクロールバーの横幅を設定します。 表示可能な画面右端位置を算出する際に、この値を使用しています。 「縦」には ブラウザ画面の下端に表示されるページスクロールバーの高さを設定します。 表示可能な画面下端位置を算出する際に、この値を使用しています。 この画面右端/下端算出処理は NS系ブラウザ、Firefoxで必要になります (単に全横幅、全縦高から引算しているダケですが)。 MSIEでは ページスクロールバーのサイズが引かれた値が取得できているようなので、 この処理は行っていません。 ページスクロールバーのサイズは可変なので、 16px決め打ちでは正確ではないのですが、 リアルタイムに取得できないのでこうなっています。 [BACK] |
|
● sshowScenarioの設定
[BACK]
sshowScenarioの配列に、コマンドを配列要素として登録することで スライドショウの動作を指定します。 コマンドには以下の種類があります。 Dispコマンド 指定したLayerを表示。 Excgコマンド 指定したLayerのみを表示。 Loadコマンド 指定のLayerに画像を読込み。 waitコマンド 表示する間のウェイト（画像表示間隔）。 endコマンド スライドショウ終了。配列の最後に書きます。 Clearコマンド 指定したLayerを非表示にします。 Cachコマンド キャッシュエリアに画像を読込みます。 ver1.0では画像表示の手順として 「 LoadコマンドでLayerに画像を読込み、 DispコマンドまたはExcgコマンドで表示させ、 waitコマンドで一定時間待つ」、 といったことをしていました。 ver2.0でも(互換性があるので)同じように使用できますが、 キャッシュを利用することで、 よりスムーズなスライドショウ表示が可能です。 キャッシュエリアに画像を読み込み、読み込みが完了するまで処理を待たせることにより、 ダウンロード中なのに画像が表示されてしまうといった事が防げます。 また、一旦 キャッシュに入れることにより、画像サイズが読み取れるので、 元サイズと同じ大きさに表示するのなら、画像サイズを指定する必要が無くなりました。 ver1.0では必ず画像の縦横のサイズを指定しなければならなかったので、 少々面倒でした。 まず最初に、単純に画像をロードして表示する例を示します。 画像は 同じディレクトリ(./)にあるImage_A1.jpgというファイルで、 画像サイズは横200px、縦300pxとします。 sshowScenario = new Array( "Load:A,./Image_A1.jpg,200,300", "Disp:A,,center,middle", "wait", "end" ); Loadコマンドで 画像(./Image_A1.jpg)をLayer Ａに読込ませて (2行目)、 次のDispコマンドで「Layer Ａ」を表示させています(3行目)。 この例では ./Image_A1.jpg のファイルサイズが大きいと 読込み中のものが画面に表示されてしまうという不都合があります (特に回線速度が遅い場合)。 しかも、Loadコマンドで画像サイズを指定する必要があり、 予めImage_A1.jpgの 縦横の表示サイズを調べておく という面倒があります。 次にキャッシュを使った例です。 キャッシュ「0」に画像 Image_A1.jpg を読込み、 それが終わるまで待ち、 終わったらLayer「A」にそれを表示し、 waitする例を 次に示します。 sshowScenario = new Array( "Cash:0,set,./Image_A1.jpg", "Cash:0,wait", "Load:A,,Cash:0", "Disp:A,,center,middle", "wait", "end" ); 上記例では、まず最初に、 Image_A1.jpg をCashコマンドで「キャッシュ０」に読込み(2行目)、 それが終わるまでwaitしています(3行目)。 この間は画面には Image_A1.jpgの画像は表示されていません。 読込待ちが終わると、Loadコマンドで「Layer Ａ」に 「キャッシュ０」の画像(Image_A1.jpg) を設定し(5行目)、 Dispコマンドで 「Layer Ａ」を表示(6行目)、 しばらくwaitします(7行目)。 画像のサイズの指定が出てこないことに注意してください。 Loadコマンドで、Cash:0に設定されている画像サイズと 画像のファイル名を読み取り、 「Layer Ａ」にそれを設定しています。 元画像と違うサイズで表示したい場合、Loadコマンドで明示的にサイズを指定します。 次に、その場合の例を示します。 画面に表示するサイズは 横555[px]、縦333[px]とします。 sshowScenario = new Array( "Cash:0,set,./Image_A1.jpg", "Cash:0,wait", "Load:A,,555,333", "Disp:A,,center,middle,Cash:0", "wait", "end" ); Loadコマンドで、明示的に 「横555px、縦333px」 のサイズを「Layer Ａ」に指定しています (ただし、画像ファイル名は指定されていません)。 次のDispコマンドで、「Cash:0」の画像を表示するように指定しています (ver2.0では、キャッシュの画像と設定済みの画像を Disp/Excgコマンドで入れ替えることができるように パラメータが拡張されました)。 なお この例は、次のように書くのと同じ効果があります。 sshowScenario = new Array( "Cash:0,set,./Image_A1.jpg", "Cash:0,wait", "Load:A,./Image_A1.jpg,555,333", "Disp:A,,center,middle", "wait", "end" ); Loadコマンドで指定されているImage_A1.jpgは 「キャッシュ０」に設定されているものなので、 即座に「Layer Ａ」に設定可能です。 その為、直後にDispコマンドがあっても 読込み中の画像が表示されることはありません。 (この書き方では「キャッシュ０」に画像がロードされている事がわかりにくく なってしまうので、あまりおすすめしませんが。) スライドショウのシナリオを書くときには、 Cashコマンドによる読み込みをwaitコマンド実行中に行うことで、 効率的な画像読込みになるように 注意します。 次の例では、画像Image_A1.jpgの表示中に、 Image_B1.jpgのキャッシュへの読込みを行い、 Image_A1.jpgの表示が終わった時に Image_B1.jpgの読込みが終わったかどうかをチェックし、 終わってなければ 終わるまで待つという例です。 sshowScenario = new Array( "Cash:0,set,./Image_A1.jpg", "Cash:0,wait", "Load:A,,Cash:0", "Disp:A,,center,middle", "Cash:1,set,./Image_B1.jpg", "wait, Image_A1.jpgを表示中", "Cash:1,wait", "Load:A,,Cash:1", "Disp:A,,center,middle", "wait, Image_B1.jpgを表示中", "end" ); このように、次に表示する画像 (この場合のImage_B1.jpg) がある場合、waitコマンドの間に読み込むようにします。 Image_B1.jpgの読込みは、このwaitの間に終了するかもしれませんし、 しないかもしれません。 waitコマンドが終わった後のCashコマンドで 「キャッシュ１」への読込みが終わっているかをチェックしています。 終わっていなければ、終わるまで待ちになります。 どちらの画像も「Layer Ａ」で表示していますが、もちろん 他のLayerで表示させてもかまいません。 １枚、また１枚と表示させていくだけならLayerはどれか１つで十分でしょう。 ver1.0ではキャッシュが無かったので 裏で次の画像を読み込む為には Layerを複数枚必要としていました。 ver2.0で複数のLayerがあるのは 複数枚の画像を同時表示する為 という性格が強くなっています。 [!] ,(カンマ)区切りで スペースは入れないでください sshowScenarioの各配列要素は 単純に ,(半角カンマ) でsplitし、先頭文字を判定しているダケです。 実際に書く場合、, 間に余分なスペースをいれるとＮＧになります。 "Load:A,,Cash:2", //-- この書き方はＯＫ --// "Load:A,, Cash:2", //-- この書き方はＮＧ --// [BACK] |
|
● Dispコマンド Format: "Disp:LL, BGcolor, POS-X, POS-Y" Format: "Disp:LL, BGcolor, POS-X, POS-Y, Cash:cashID" Parameters: LL : [A | B | C | D | E | F] BGcolor : [color] POS-X : [left | center | right] POS-Y : [top | middle | bottom] cashID : [0 〜 9] 指定したLayerを表示します。 このコマンドで表示する前に、LayerにはLoadコマンドで 画像の読込みを行います。 Layerは A から F まであり、どのLayerを表示するかは LL で指定します。 Excgコマンドと違い、他のLayerには影響を与えません。ただし、Layerには z-index(重なり方向の順序) が設定してあり、 Layerが同時に表示されて、重なる部分がある場合、 以下の順序に従って表示されます。 [Layerのz-index] (３段階) [← 下に重なる] A,B < C,D < E,F [上に重なる →] この順序により、LayerAとLayerCが同時に表示され、 一部が重なっている場合、LayerCが上になります。 AとBが同時に表示され、一部が重なっている場合は、 どちらが上になるかは不定(大抵は後から表示した方が上)になります。 colorは省略可能です。これは背景色を変更したい場合に指定します。 指定方法は #000000 といった16進表記や、 black といった文字列が使用可能です。 背景色を変更すると、再変更するまで 以降は同じ背景色になります。 POS-Xは、横方向のLayer表示位置を指定します。 POS-Yは、縦方向のLayer表示位置を指定します。 画像をブラウザ画面中央に表示する場合は、 POS-Xに center 、 POS-Yに middle を指定します。 Ex.1) Layer-Fを画面右上端に表示する "Disp:F,, right, top" Ex.2) Layer-Dを画面中央に表示し、背景を白 "Disp:D,white, center, middle" ○ キャッシュ画像との入替 ver2.0から、Disp/Excgコマンドで キャッシュの画像とLoadコマンドで設定済の画像を 入れ替えることができるようになっています。 ただし、画像サイズは変更できません。 Ex.2) Layer-Dを画面中央に表示し、キャッシュ３の画像と入れ替え "Disp:D,, center, middle, Cash:3 " [BACK] |
|
● Excgコマンド Format: "Excg:LL, BGcolor, POS-X, POS-Y" "Excg:LL, BGcolor, POS-X, POS-Y, Cash:cashID" Parameters: LL : [A | B | C | D | E | F] BGcolor : [color] POS-X : [left | center | right] POS-Y : [top | middle | bottom] cashID : [0 〜 9] 指定したLayerを表示し、その他のLayerを非表示にします。 このコマンドで表示する前に、LayerにはLoadコマンドで 画像の読込みを行います。 Layerは A から F まであり、どのLayerを表示するかは LL で指定します。 colorは省略可能です。これは背景色を変更したい場合に指定します。 指定方法は #000000 といった16進表記や、 black といった文字列が使用可能です。 背景色を変更すると、再変更するまで 以降は同じ背景色になります。 POS-Xは、横方向のLayer表示位置を指定します。 POS-Yは、縦方向のLayer表示位置を指定します。 画像をブラウザ画面中央に表示する場合は、 POS-Xに center 、 POS-Yに middle を指定します。 Ex.1) Layer-Fを画面右上端に表示し、その他のLayerを非表示にする "Excg:F,, right, top" Ex.2) Layer-Dを画面中央に表示し、その他のLayerを非表示に、背景を白 "Excg:D,white, center, middle" ○ キャッシュ画像との入替 ver2.0から、Disp/Excgコマンドで キャッシュの画像とLoadコマンドで設定済の画像を 入れ替えることができるようになっています。 ただし、画像サイズは変更できません。 Ex.2) Layer-Dのみを画面中央に表示し、キャッシュ３の画像と入れ替え "Excg:D,, center, middle, Cash:3 " [BACK] |
|
● Loadコマンド Format: "Load:LL, File-URL, Wdith, Height" "Load:LL,, Wdith, Height" "Load:LL,, Cash:cashID" Parameters: LL : [A | B | C | D | E | F] File-URL : Image file (.jpg , .gif) … 省略可能パラメータ Width : Image file size - width[px] Height: Image file size - height[px] cashID: [1 〜 9] 指定したLayerに画像の読込みを行います。 Layerは A から F まであり、どのLayerに読み込むかは LL で指定します。 画像ファイル(.jpgや.gif)はFile-URLで指定します。 相対パスでも、フルURL(http://.../...jpg型)でもかまいません。 File-URLは、省略可能パラメータです。 省略する場合は , を連続させてください (間にスペース等が入ると省略とみなされません)。 Disp/Excgコマンドでキャッシュ画像を指定する場合などには、省略しておきます。 また、このコマンドでWidth,Heightの指定のかわりに CashIDを指定する書式の場合にも省略します。 Widthは、画像ファイルの実際に表示する横幅を指定します (IMGタグのwidthに反映します)。 Heightは、画像ファイルの実際に表示する縦長を指定します (IMGタグのheightに反映します)。 画像ファイルを拡大や縮小無しで表示する場合、 Widthや Heightには 画像ファイルの横/縦の値を調べて その値を使います。 ただし、その場合でも画像サイズがブラウザ画面サイズをはみ出す場合は、 自動的に横/縦が比率計算されて 縮小されて表示されます。 Loadで指定されたLayerは、Clearコマンドで指定しなくても、非表示になります。 Ex.1) Layer-Aから Layer-Fまで、一気に画像を読み込み、 一旦、waitする例。(ver1.0で使っていた方法. この方法では画像読込が終了したかどうかを正確に判定できません) "Load:A, ./image_A.jpg, 100, 200" , "Load:B, ./image_B.jpg, 100, 200" , "Load:C, ./image_C.jpg, 100, 200" , "Load:D, ./image_D.jpg, 100, 200" , "Load:E, ./image_E.jpg, 100, 200" , "Load:F, ./image_F.jpg, 100, 200" , "wait", Ex.2) 「キャッシュ０」に設定されていた画像を 「Layer Ａ」に設定する例。(画像のファイル名、 縦横のサイズが設定されます) "Load:A,, Cash:0" , Ex.３) 「キャッシュ０」に設定されていた画像の縦横のサイズで設定するが、 画像ファイルには http://www.hoge.com/hoge.gif を 「Layer Ａ」に設定する例。(画像のファイル名の指定を 省略しなかった場合 その画像が使用されます) "Load:A, http://www.hoge.com/hoge.gif, Cash:0" , Ex.４) 縦横のサイズが 333px*444pxの画像エリアを 「Layer Ａ」に設定する例。(画像ファイルは 設定されないので、Disp/Excgコマンドで指定して使用します) "Load:A,, 333, 444", [!] ,(カンマ)区切りで スペースは入れないでください sshowScenarioの各配列要素は 単純に ,(半角カンマ) でsplitし、先頭文字を判定しているダケです。 実際に書く場合、, 間に余分なスペースをいれるとＮＧになります。 "Load:A,,Cash:2", //-- この書き方はＯＫ --// "Load:A,, Cash:2", //-- この書き方はＮＧ --// [BACK] |
|
● waitコマンド Format: "wait, statusLine-message" Parameters: statusLine-message : [message] start_sshowScenario関数のパラメータで指定した時間だけ、 待ちになります。 つまり、waitする時間(msec単位)は スライドショウ起動時に一回だけ指定します。 このコマンドではwaitするという事だけが指定できます。 wait時間はスライドショウ実行中に ブラウザからリンクのクリックで変更可能になっている事に注意してください。 waitコマンドが実行されるとき、 statusLine-message のパラメータを指定されていた場合、 ブラウザ下端のステータス行に そのパラメータがメッセージとして表示されます。 statusLine-messageは省略可能です。 Ex.1) waitする "wait" Ex.2) waitすると同時に、ステータス行に Hello! と表示する。 "wait,Hello!" [BACK] |
|
● endコマンド Format: "end, statusLine-message" Parameters: statusLine-message : [message] スライドショウを終了します。 普通、sshowScenario配列の最後に書きます。 途中に書いた場合、そこでスライドショウは終了します。 このコマンドでスライドショウを終了するとき、 statusLine-message のパラメータを指定していた場合、 ブラウザ下端のステータス行にメッセージが表示されます。 statusLine-messageは省略可能です。 [!] JavaScriptでは 配列の最後には , は不要な事に注意してください。 書くとエラーになります。 Ex.1) 終了 "end" Ex.2) 終了すると同時に、ステータス行に Bye! と表示する。 "end,Bye!" [BACK] |
|
● Clearコマンド Format: "Clear: L1,L2,..." Parameters: L1 : [A | B | C | D | E | F] 指定したLayerを非表示にします。 Layerは複数指定可能です。 Ex.1) AのLayerを非表示 "Clear:A" Ex.2) A, B, C のLayerを非表示 "Clear:A,B,C" [BACK] |
|
● Cashコマンド Format: "Cash:cashID,set, File-URL" (setモード) "Cash:cashID,wait" (waitモード) Parameters: cashID : [0 〜 9] File-URL : 画像ファイル名 (相対パスまたは絶対パス) setモードの時には 指定したキャッシュに画像を設定します。 waitモードの時には 指定したキャッシュの読込みが終了しているかどうかをチェックし 読込み完了まで待ちます。 この「待ち」はタイムアウトが設定されていて、25秒経過しても完了しない場合は 「待ち」を中断して 次のコマンドの処理に移ります。 Ex.1) 「キャッシュ０」に画像hoge.jpgを読込み "Cash:0,set,./hoge.jpg" Ex.2) 「キャッシュ０」への画像読込みが終了するまでwait (ただし 25秒経過しても完了しない場合はwaitを中止します) "Cash:0,wait" [BACK] |
|
● complete (Imageオブジェクト) Imageオブジェクトの complete は、 画像の読込みが完了しているかどうかを示す真偽値(true,false)を返します。 次のような書き方になるでしょう。 var Img=new Image(); //-- まずインスタンスをつくって, --// Img.src='http://www.hoge.com/poge.gif'; //-- 読み込み --// .... var rslt=Img.complete; if (rslt!=true) { //-- まだ読み込み中 --// この例では http://www.hoge.com/poge.gif が読込完了になるまで Img.completeは false になります。 真偽値の判定になるので、次のように書くとＮＧです。 var rslt=Img.complete; if (rslt!='true') { //--[NG!] 文字列判定になっている -// typeof()が 'string' とか、'number' といった文字列を返すのと混同して やってしまうミスです(^^; ページにあるIMGタグ(nameがmogeとします)の場合、次のようになります。 var rslt=window.document.images['moge'].complete; [!] 注意 completeがtrueになるまで whileループで延々と待つようなコード は書かないでください。 LANが切れていたりすると、いつまでたってもtrueにならず、無限ループになります。 NS/Firefox系ではこの場合、タイムアウトするとtrueを返し、 無限ループにならないようですが、MSIEでは「無限ループ化」します。 「生コードお手打ち本舗」の「スライドショウ ver2.0」では、画像読込みのチェックは 25秒でタイムアウトさせています (具体的なコードは load2imageCashe()関数 に書いてあります)。 [BACK] |
|
● XXXXXXX [BACK] |