こんにちは
以下にて、多少は改善されるのではと思われる修正をサンプルにて回答します。
改善前のものとして、以下のような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()
に対するオプションが、 以下の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
を追加しているのは、<img>
の src属性が無い状態のときに、ブラウザのデフォルトの動作で、何らかの無効な画像を示す×印のようなものが表示されないようにすることを意図したもので、この回答の本筋にはあまり関係のない、補助的なものです。
この回答で、最も重要な主旨は、
onlyData
を true にしたうえで、onComplete
オプションを上手く使いましょう。
という点になるかと思います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/12 13:34
2019/05/12 13:55