MooFlowのメモ

カバーフローのように表示できる MooToolsを使った JavaScript、MooFlowのメモ

写真の数が増えたときにどの程度の速度で動くのかを知りたくて実験したところ、100枚程度を超えると表示が乱れることが判明。reflection (鏡面反射)の部分がタイトルやコントロール部分の上側になってしまう。では具体的にどこから表示がおかしくなるのかを調べた。

• 93枚までは正常
• 94枚は最初の数十枚までは正しく表示されるが、それ以降は画像が最前面に表示される
• 95枚以降は全て画像が最前面に表示される

ということが分かった。

使っている MooToolsは MooFlowのページからダウンロードした物で、バーションが 1.2と最新版よりも若干古いようである。そこで、最新版を MooToolsのページからダウンロードして試すことにした。1.2.4である。MooToolsについては全く詳しくないのだが、coreとmore(拡張)部分に分かれているようで、MooFlowは moreも使っている。MooToolsからダウンロードの際、機能を選んでダウンロードしなければならず、どの機能を使っているか何て分からないから全部の機能を選んでダウンロードすることにした。

早速最新版に置き換えて実行してみる。しかし何も表示されない。Java Consoleで何かエラーが出ていないか確認すると、

uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://nathan.propertymaps.com/idx_mapplet/js/MooFlow.js?id=1225575733 :: anonymous :: line 410" data: no]

なにやらエラーのようである。drawImage mooflow で検索すると結構あっさりと情報が得られた。ここに書かれたとおり修正すると、これまたあっさりと動いた。

MooFlow 0.2
398: i = arg.img.clone();
を
398: var i = new Element('img').setProperty('src', arg.img.src);
に置き換える。

で、早速100枚以上の写真を確認すると....変わらずでした。とりあえず93枚以下で運用するようにしよう...。気が向いたら作者に連絡してみよう。(2/3追記分で解決)