teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問jQueryのfadeInで読み込んだ画像を同時に表示させたい。

編集履歴

回答編集履歴

3

コメント追加

2019/10/05 21:27

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -13,18 +13,24 @@
13
13
  var loadingDelay = 2000; // ロード時間
14
14
  var fadingDuration = 2000; // フェードイン時間
15
15
 
16
+ // Promiseオブジェクトを返す即時関数を実行
16
17
  var promise = (function() {
17
18
  var deferred = $.Deferred();
18
19
 
19
20
  setTimeout(function() {
21
+ // loadingDelayミリ秒後に実行される
22
+
23
+ // resolveした直後に最初のfadeInALittleが実行される
20
- deferred.resolve(1.0 / frames);
24
+ deferred.resolve(1.0 / frames); // 最初のfadeInALittleに渡される引数を指定
21
25
  }, loadingDelay);
22
26
 
23
27
  return deferred.promise();
24
28
  })();
25
29
 
30
+ // 不透明度を徐々に0.0→1.0に上げて行き、コマ送りでフェードイン
26
31
 
27
32
  for (var i = 0; i < frames; i++) {
33
+ // 非同期関数fadeInALittleを順に実行予約
28
34
  promise = promise.then(fadeInALittle);
29
35
  }
30
36
 
@@ -32,10 +38,14 @@
32
38
  var deferred = $.Deferred();
33
39
 
34
40
  setTimeout(function() {
35
- console.log(opacity);
36
- $('.gallery').css('opacity', opacity);
41
+ // fadingDuration / framesミリ秒後に実行される
37
42
 
43
+ console.log(opacity);
44
+ // 実際に不透明度を設定
45
+ $('.gallery').css('opacity', opacity);
46
+
47
+ // resolveした直後に次のfadeInALittleが実行される
38
- deferred.resolve(opacity + 1.0 / frames);
48
+ deferred.resolve(opacity + 1.0 / frames); // 次のfadeInALittleに渡される引数を指定
39
49
  }, fadingDuration / frames);
40
50
 
41
51
  return deferred.promise();
@@ -50,18 +60,32 @@
50
60
  var promiseArray = [];
51
61
 
52
62
  $('.im').each(function(index, imgElement) {
63
+ // 各々の画像をロード＆デコードする予約を集める
53
- promiseArray.push(loadImg(imgElement));
64
+ promiseArray.push(loadAnImg(imgElement));
54
65
  });
55
66
 
56
- function loadImg(imgElement) {
67
+ function loadAnImg(imgElement) {
68
+ // src属性を退避
57
69
  imgElement.originSrc = imgElement.src;
70
+ // 勝手にロード＆デコードが始まらないように、一旦src属性を無効化
58
71
  imgElement.src = '';
72
+ // ロード＆デコードを監視するためのImageオブジェクト
59
73
  var imgObj = new Image();
74
+
75
+ var deferred = $.Deferred();
76
+
77
+ // ロード＆デコードを開始
60
78
  imgObj.src = imgElement.originSrc;
61
79
 
80
+ // デコードが終了したときに実行される関数を予約
62
- var deferred = $.Deferred();
81
+ imgObj.decode()
63
- imgObj.decode().catch(function() {})
82
+ .catch(function() {
83
+ // デコードが失敗した時も成功と同じに見なすための空の関数
84
+ })
64
85
  .finally(function() {
86
+ // デコードが成功または失敗したとき（Chrome対応）に実行される
87
+
88
+ // src属性を復元
65
89
  imgElement.src = imgElement.originSrc;
66
90
  deferred.resolve();
67
91
  });
@@ -70,6 +94,10 @@
70
94
  }
71
95
 
72
96
  $.when.apply(null, promiseArray).done(function() {
97
+ // すべてのPromiseオブジェクトがresolveされたときに実行される
98
+
73
99
  $('.gallery').fadeIn(1500);
74
100
  });
75
- ```
101
+ ```
102
+
103
+ ちゃんと理解したいとのことなので、コメントをつけました。

2

Chrome対応

2019/10/05 21:27

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -44,23 +44,32 @@
44
44
 
45
45
  oikashinoaさんのdecodeを使った別解です。
46
46
  スムーズに表示されますね。
47
+
48
+ Chromeで表示されなくなってしまっていたので、その対応を行いました。
47
49
  ```JavaScript
48
- var promiseArray = [];
50
+ var promiseArray = [];
49
51
 
50
- $('.im').each(function(index, imgElement) {
52
+ $('.im').each(function(index, imgElement) {
51
- promiseArray.push(loadImg(imgElement));
53
+ promiseArray.push(loadImg(imgElement));
52
- });
54
+ });
53
55
 
54
- function loadImg(imgElement) {
56
+ function loadImg(imgElement) {
55
- imgElement.originSrc = imgElement.src;
57
+ imgElement.originSrc = imgElement.src;
56
- imgElement.src = "";
58
+ imgElement.src = '';
59
+ var imgObj = new Image();
60
+ imgObj.src = imgElement.originSrc;
57
61
 
62
+ var deferred = $.Deferred();
63
+ imgObj.decode().catch(function() {})
64
+ .finally(function() {
58
- imgElement.src = imgElement.originSrc;
65
+ imgElement.src = imgElement.originSrc;
66
+ deferred.resolve();
67
+ });
59
68
 
60
- return imgElement.decode();
69
+ return deferred.promise();
61
- }
70
+ }
62
71
 
63
- $.when.apply(null, promiseArray).done(function() {
72
+ $.when.apply(null, promiseArray).done(function() {
64
- $('.gallery').fadeIn(1500);
73
+ $('.gallery').fadeIn(1500);
65
- });
74
+ });
66
75
  ```

1

別解追加

2019/10/05 19:32

投稿

naomi3
naomi3

スコア1105

answer CHANGED
@@ -40,5 +40,27 @@
40
40
 
41
41
  return deferred.promise();
42
42
  }
43
+ ```
43
44
 
45
+ oikashinoaさんのdecodeを使った別解です。
46
+ スムーズに表示されますね。
47
+ ```JavaScript
48
+ var promiseArray = [];
49
+
50
+ $('.im').each(function(index, imgElement) {
51
+ promiseArray.push(loadImg(imgElement));
52
+ });
53
+
54
+ function loadImg(imgElement) {
55
+ imgElement.originSrc = imgElement.src;
56
+ imgElement.src = "";
57
+
58
+ imgElement.src = imgElement.originSrc;
59
+
60
+ return imgElement.decode();
61
+ }
62
+
63
+ $.when.apply(null, promiseArray).done(function() {
64
+ $('.gallery').fadeIn(1500);
65
+ });
44
66
  ```