時間という要素をプログラムに持ち込むため,ソースの理解はかなり難しいものとなっている.
setTimeout
関数(またはsetInterval関数
)を使用することで,一定時間後に何々を実行する,ということが可能になる.ソースではchangeImage
関数を0.5秒間隔で実行し,そのたびに画像を変化させるといった処理を行っている.
また,この画像を変化させはじめるタイミングも問題になる.この場合,「ページが読み込まれたら」というタイミングになっているが,これはwindow.onload
に実行したい処理を書くことで実現している.
尚,ここでは4枚の画像を順番に表示しているが,1→2→3→4と表示したら,1に戻すという処理(++frame % myImages.length
)を行っている.1→2→3→4→1→2→3→4→1→...とエンドレスで画像が切り替え表示される.