JavaScriptのイベントを理解する

ファイルが読み込まれるまでアニメーションを表示する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
読み込み待ちのアニメーションを動的に加えて、外部画像を読み込んだら削除します。
講師:
09:47

字幕

このレッスンではファイルの読み込み待ちの 処理についてご説明します 今回は画像の読み込みです 画像の読み込みはそのサイズや あるいはサーバー関係によって 時間がかかることがあります そうした場合に読み込んでいますよ という アニメーションがあると分かりやすいです 今画面にはサムネールがあるんですが これをクリックすると 大きいな画像が読み込まれます そしてその時にですね こんな画像が用意してあります gif アニメですけれども こういう表示をしておいて もちろん画像が実際に読み込まれたら 消さないといけません そのイベントの扱い方についても ご紹介します まず読み込み待ちの gif アニメがあるなんですが html ドキュメントと同じ階層にある images というフォルダの中に spinner.gif ということで ファイルがあります これをダイナミックに読み込んで表示する それからその後大きいな画像が 読み込み終わったら 消すと 大きいな画像サムネールにありますが そういう処理を加えていきます Dreaweaver で開いて HTML ドキュメントですが 画像の読み込み サムネールをクリックして 読み込みところまでは 出来ていますけれども 読み込み待ちの gif アニメは まだ入れてありません 現在の状態を確認しておきましょう 「ファイル」の 「ブラウザーでプレビュー」です サムネールが出てきて クリックすると大きいな画像が読み込まれ 背景画像も少し暗くなっります この読み込み待ちの間 一瞬なんですけれども 先ほどの gif アニメを 表示したいと思います JavasScript コードの流れを 簡単に確認しておきましょう まずサムネールはここにあります クラスは preview ですね その要素を取り出して addEventListener クリックしたら ロードの処理をしましょう ということになっています 画像を読み込むのはこの div です overlay と空なんですが ここに解像度の高い画像を差し込みます ですのでオーバーレイを取ってきて そしてダイナミックに高解像度の 画像を読み込むオブジェクトを作り それをオーバーレイの子供として加えて それから高解像度の 画像のパスを設定するという形で 先ほどの読み込みが 実現されています ここにでは読み込み待ちの画像を 加えていくことにします 読み込むやはりイメージで オブジェクトをダイナミックに作ります 変数名は「spinner」としましょう 画像のファイル名と同じです ドキュメントの createElement ですね こちらの高解像度の オブジェクトを作るのと同じやり方です そして設定を順に行ってみましょう spinner コピーします まずはソースですね確認しました images というフォルダーですね その spinner という名前の gif ファイルでした そしてこれはまだダイナミックに メモリーに読み込む状態になっていますから やはりオーバーレイの子供として ですからここを使っちゃいましょう オーバーレイに appendChild ということで 高解像度の画像と兄弟なりますけど 後から読み込みますから 手前に表示されます そこに spinner を入れて あげればいいと 後表示1などは css で設定してあります スタイルシートを確認しますと ここですね overlay の中に img のオブジェクトとして spinner というクラスで 位置とか表示の仕方を設定してあります なのでこの spinner というクラス これを読み込んだ 読み込み待ちの画像にも 設定してあげる必要がありますので これをクラス名と追加してしましょう spinner の「 . 」 先ほどのクラスですね className を 名は spinner なんで ごっちゃになりそうなんですが これは spinnner というクラス これを設定して先ほどの css の 表示の設定を適用しようと いうことになります では保存して 確認しましょう 「ファイル」を保存して 「ブラウザーでプレビュー」します サムネールがありますクリックすると 高解像度の画像が読み込まれ これから読み込み待ちの gif も表示されています これをもちろん高解像度の画像が 読み込まれたら消えますので その処理を次に行っていきます では大きい画像が読み込み終わったら 大きい画像はこの「highres」 という名前になっているんですけれども 読み込み終わったらという これはやはり eventListener で 読み込み待ちをします コピーを持ってきて addEventListener ですね 読み込んだらという イベントはロードとなります そして listener 関数を これから準備しますですけれども loaded としましょう function の loaded と 一応コピーした方が安心ですね そして eventListener ですから eventObject を 受け取ります 括弧閉じと そしてイベントのターゲットをしたびます そしてイベントのターゲットを指定します 変数はターゲットとして 読み込み終わったというイベントが どの要素に対して 指定されるということなんですが ターゲットですねこれは高解像度の 要素に addEventListener しましたので この高解像度の要素が ターゲットに入ります そうしたら親から除くという 処理を行いますので 高解像度の要素の親も spinner の親も同じ overlay ですから同じ親ですので この親をまず受け取ります parent で target の コピーします parentNode ですね これで overlay が取れましたので 次は spinner です spinner は overlay parent の子供ですから まず変数は spinner にしましょう parent に聞きます 聞き方は quereySelector ですね そして image の要素で spinner というクラス名が 付けられていますので それを探しないということで spinner が取れます そうしたら準備が整えましたので 読み込み終わったら parent から spinner を除けばいいのですね では parent で 子供を加えるのが appendChild でしたので 逆は remove です removeChild そして spinner ここで忘れないで頂きたいことがあります 読み込みが終わったら もう読み込み待ち必要ないですよね なのでこの addEventListener を 読み込みが終わったら コピーしますけれども 削除するとことを押してください 削除は remove です そして highres という変数は この中にないのでターゲットを使います 得に見た目はなにも問題がない ことが多いんですけど 後で選んだことがあります ちゃんと remove をしておくことを 忘れないようにしましょう メモリーの無駄という部分もあります では一旦ファイルを保存して確認します 「ファイル」から 「ブラウザーでプレビュー」です サムネールをクリックそると 読み込み待ちのアニメが一瞬表示されます 一瞬ですのでよく見ていてください クリックします 一瞬出ましたね もう一度念のためリフレッシュして クリック一瞬ですからはい出ました そして高解像度の画像が 出てきたら表示が消えました このレッスンでは外部ファイルの 読み込み待ちのイベントを紹介しました それから処理が終わった eventListener は 削除するということも 是非とも覚えておいてください

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

2時間45分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月23日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。