jQueryの非同期処理について。順番に実行させるには。

やりたいこと

jQuery, javascript初心者です。趣味でサイトを作っています。

Aボタン(.buttonA)をホバーした時に、png画像(A.png)をクロマキー処理して、class="xx"の<img>のところに表示する、
という仕組みを作りたいと思っています。

クロマキー処理にはalphaimageというjQueryのプラグインを使っています。

(クロマキー処理とは、単色の背景を透過させることです。)
(ちなみに、他のボタンがホバーされた時は他の画像を代わりに表示させるつもりです。そのためあらかじめイメージをAlphaimageで処理しておくとのではなく、ホバーの際にクロマキー処理をさせたいと考えました。)

発生している問題・エラーメッセージ

ホバーした時、処理後の画像が出るより先にクロマキー処理前の画像が一瞬表示されてしまいます。javaScriptの非同期処理が原因かと考え、whenとdoneを使ってみたのですが、改善しませんでした。

以下は、jQueryのコードになります。

該当のソースコード

JavaScript
1$(function(){
2    $('.buttonA').hover(function(){
3      $.when(
4        $('.c-img2').attr('src','../A.png'),
5        $('.c-img2').alphaimage({colour:"#00FF00"})
6      ).done(
7        $('.c-img2').css('display','inline')
8      );
9    },function(){
10      $('.c-img2').css('display','none');
11    });
12});

補足情報（FW/ツールのバージョンなど）

確認はGooglechromeで行っています。
alphaimageプラグインは↓のものです。
http://sly777.github.io/Jquery-Alpha-Image/

おそらくプラグインというよりは、javaScriptの動作を理解できていないのかなと思います。
javaScriptとjQueryについてはかなり初心者なので、お手柔らかに教えてくだされば嬉しいです。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは

以下にて、多少は改善されるのではと思われる修正をサンプルにて回答します。

改善前のものとして、以下のようなHTMLを作成します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Q188894</title>
6    <script src="js/jquery-3.4.1.min.js"></script>
7    <script src="js/jquery.alphaimage.js"></script>
8    <script>
9      $(document).ready(function() {
10
11        $('.buttonA').hover(
12          function() {
13            $('img')
14              .attr('src', 'img/Octocat.png')
15              .alphaimage({
16                colour: "#f4cab1"
17              });
18          },
19          function() {
20            $('img').removeAttr('src');
21          }
22        );
23
24      });
25    </script>
26    <style>
27        .buttonA {
28            width: 800px;
29            height: 665px;
30            border: solid 1px #444;
31        }
32    </style>
33</head>
34<body>
35    <div class="buttonA">
36        <img />
37    </div>
38</body>
39</html>

上記で使用している画像ファイルOctocat.pngはGitHubのキャラクターのOctocatの画像で、Alpha-Imageのサイトでもサンプルで使用されているものです。GitHub Logos and Usage の Download Octocat のリンクからダウンロードできます。
画像は img/, JQuery と alphaimage は、js/ フォルダの中に置いています。

上記のHTMLを表示すると、初期表示では <div> の中は何も表示されませんが、<div> の中にマウスカーソルを移動させると、Octocat の画像から顔の肌色を抜いた画像が表示され、マウスが <div> から外れると画像表示が消えます。

ですが、このままだとご質問の状況と同じように、マウスが <div> に入ったときに一瞬、肌色が抜ける前の画像が見えるときがあります。

これを改善したものが、以下です。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Q188894</title>
6    <script src="js/jquery-3.4.1.min.js"></script>
7    <script src="js/jquery.alphaimage.js"></script>
8    <script>
9      $(document).ready(function() {
10
11        const img = $('img');
12
13        img.on('load', function() {
14          if (img.attr('src') !== 'img/Octocat.png') return;
15          img.alphaimage({
16            colour: "#f4cab1",
17            onlyData: true,
18            onComplete: function(result) {
19              img.attr('src', result.imageSrc).removeClass('hidden');
20            }
21          });
22        });
23
24        $('.buttonA').hover(
25          function() {
26            img.attr('src', 'img/Octocat.png');
27          },
28          function() {
29            img.removeAttr('src').addClass('hidden');
30          }
31        );
32
33      });
34    </script>
35    <style>
36        .buttonA {
37            width: 800px;
38            height: 665px;
39            border: solid 1px #444;
40        }
41        .hidden { visibility: hidden; }
42    </style>
43</head>
44<body>
45    <div class="buttonA">
46        <img class="hidden"/>
47    </div>
48</body>
49</html>

上記で意図しているのは、マウスカーソルが div に入ったときに、以下の (1)〜(4)が順に行われることです。

(1)<img> の src属性に img/Octocat.png を設定する。
(2) <img>要素が、img/Octocat.png　を読み込む。
(3) 読み込みが完了したら、 .alphaimage() で透過処理を実行
(4) 透過処理が完了したら、透過処理によって生成された画像のURLをsrc属性に設定し、かつ .hiddenを削除します。この「透過処理が完了したら、」というのを実現するための .alphaimage() に対するオプションが、以下の２点です。（Alpha-Imageのサイトから引用)