質問: ### やりたいこと jQuery, javascript初心者です。趣味でサイトを作っています。 Aボタン(.buttonA)をホバーした時に、png画像(A.png)をクロマキー処理して、class="xx"ののところに表示する、 という仕組みを作りたいと思っています。 クロマキー処理にはalphaimageというjQueryのプラグインを使っています。 (クロマキー処理とは、単色の背景を透過させることです。) (ちなみに、他のボタンがホバーされた時は他の画像を代わりに表示させるつもりです。そのためあらかじめイメージをAlphaimageで処理しておくとのではなく、ホバーの際にクロマキー処理をさせたいと考えました。) ### 発生している問題・エラーメッセージ ホバーした時、処理後の画像が出るより先にクロマキー処理前の画像が一瞬表示されてしまいます。javaScriptの非同期処理が原因かと考え、whenとdoneを使ってみたのですが、改善しませんでした。 以下は、jQueryのコードになります。 ### 該当のソースコード ``` $(function(){ $('.buttonA').hover(function(){ $.when( $('.c-img2').attr('src','../A.png'), $('.c-img2').alphaimage({colour:"#00FF00"}) ).done( $('.c-img2').css('display','inline') ); },function(){ $('.c-img2').css('display','none'); }); }); ``` ### 補足情報(FW/ツールのバージョンなど) 確認はGooglechromeで行っています。 alphaimageプラグインは↓のものです。 http://sly777.github.io/Jquery-Alpha-Image/ おそらくプラグインというよりは、javaScriptの動作を理解できていないのかなと思います。 javaScriptとjQueryについてはかなり初心者なので、お手柔らかに教えてくだされば嬉しいです。
回答: こんにちは 以下にて、多少は改善されるのではと思われる修正をサンプルにて回答します。 改善前のものとして、以下のようなHTMLを作成します。 ``` Q188894 ``` * 上記で使用している画像ファイル`Octocat.png`はGitHubのキャラクターのOctocatの画像で、Alpha-Imageのサイト でもサンプルで使用されているものです。GitHub Logos and Usage の `Download Octocat` のリンクからダウンロードできます。 * 画像は `img/`, JQuery と alphaimage は、`js/` フォルダの中に置いています。 上記のHTMLを表示すると、初期表示では `` の中は何も表示されませんが、`` の中にマウスカーソルを移動させると、Octocat の画像から顔の肌色を抜いた画像が表示され、マウスが `` から外れると画像表示が消えます。 ですが、このままだとご質問の状況と同じように、マウスが `` に入ったときに一瞬、肌色が抜ける前の画像が見えるときがあります。 これを改善したものが、以下です。 ``` Q188894 ``` 上記で意図しているのは、マウスカーソルが div に入ったときに、以下の (1)〜(4)が順に行われることです。 (1)`` の src属性に `img/Octocat.png` を設定する。 (2) ``要素が、`img/Octocat.png` を読み込む。 (3) 読み込みが完了したら、 `.alphaimage()` で透過処理を実行 (4) 透過処理が完了したら、透過処理によって生成された画像のURLをsrc属性に設定し、かつ `.hidden`を削除します。この「透過処理が完了したら、」というのを実現するための `.alphaimage()` に対するオプションが、 以下の2点です。(Alpha-Imageのサイト から引用) > > onlyData: When completed, plugin returns result that has Image and Image Data. (default : false) > > onComplete: If you change onlyData option to true, it works when image processing completed. > > > 改良版の方で動作確認しましたが、私の手元では、マウスが乗ったときに、一瞬肌色が見えることはなくなりました。 以上参考になれば幸いです。 ### 補足 CSSクラス`.hidden` を追加しているのは、`` の src属性が無い状態のときに、ブラウザのデフォルトの動作で、何らかの無効な画像を示す×印のようなものが表示されないようにすることを意図したもので、この回答の本筋にはあまり関係のない、補助的なものです。 この回答で、最も重要な主旨は、 * `onlyData` を true にしたうえで、`onComplete` オプションを上手く使いましょう。 という点になるかと思います。