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

編集履歴

回答編集履歴

3

コメント追加

2019/10/05 21:27

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -28,6 +28,8 @@
28
28
 
29
29
 
30
30
 
31
+ // Promiseオブジェクトを返す即時関数を実行
32
+
31
33
  var promise = (function() {
32
34
 
33
35
  var deferred = $.Deferred();
@@ -36,7 +38,13 @@
36
38
 
37
39
  setTimeout(function() {
38
40
 
41
+ // loadingDelayミリ秒後に実行される
42
+
43
+
44
+
45
+ // resolveした直後に最初のfadeInALittleが実行される
46
+
39
- deferred.resolve(1.0 / frames);
47
+ deferred.resolve(1.0 / frames); // 最初のfadeInALittleに渡される引数を指定
40
48
 
41
49
  }, loadingDelay);
42
50
 
@@ -48,10 +56,14 @@
48
56
 
49
57
 
50
58
 
59
+ // 不透明度を徐々に0.0→1.0に上げて行き、コマ送りでフェードイン
60
+
51
61
 
52
62
 
53
63
  for (var i = 0; i < frames; i++) {
54
64
 
65
+ // 非同期関数fadeInALittleを順に実行予約
66
+
55
67
  promise = promise.then(fadeInALittle);
56
68
 
57
69
  }
@@ -66,13 +78,21 @@
66
78
 
67
79
  setTimeout(function() {
68
80
 
81
+ // fadingDuration / framesミリ秒後に実行される
82
+
83
+
84
+
69
- console.log(opacity);
85
+ console.log(opacity);
86
+
70
-
87
+ // 実際に不透明度を設定
88
+
71
- $('.gallery').css('opacity', opacity);
89
+ $('.gallery').css('opacity', opacity);
90
+
91
+
92
+
72
-
93
+ // resolveした直後に次のfadeInALittleが実行される
73
-
74
-
94
+
75
- deferred.resolve(opacity + 1.0 / frames);
95
+ deferred.resolve(opacity + 1.0 / frames); // 次のfadeInALittleに渡される引数を指定
76
96
 
77
97
  }, fadingDuration / frames);
78
98
 
@@ -102,30 +122,58 @@
102
122
 
103
123
  $('.im').each(function(index, imgElement) {
104
124
 
125
+ // 各々の画像をロード＆デコードする予約を集める
126
+
105
- promiseArray.push(loadImg(imgElement));
127
+ promiseArray.push(loadAnImg(imgElement));
106
128
 
107
129
  });
108
130
 
109
131
 
110
132
 
111
- function loadImg(imgElement) {
133
+ function loadAnImg(imgElement) {
134
+
135
+ // src属性を退避
112
136
 
113
137
  imgElement.originSrc = imgElement.src;
114
138
 
139
+ // 勝手にロード＆デコードが始まらないように、一旦src属性を無効化
140
+
115
141
  imgElement.src = '';
116
142
 
143
+ // ロード＆デコードを監視するためのImageオブジェクト
144
+
117
145
  var imgObj = new Image();
118
146
 
147
+
148
+
149
+ var deferred = $.Deferred();
150
+
151
+
152
+
153
+ // ロード＆デコードを開始
154
+
119
155
  imgObj.src = imgElement.originSrc;
120
156
 
121
157
 
122
158
 
159
+ // デコードが終了したときに実行される関数を予約
160
+
123
- var deferred = $.Deferred();
161
+ imgObj.decode()
124
-
162
+
125
- imgObj.decode().catch(function() {})
163
+ .catch(function() {
164
+
165
+ // デコードが失敗した時も成功と同じに見なすための空の関数
166
+
167
+ })
126
168
 
127
169
  .finally(function() {
128
170
 
171
+ // デコードが成功または失敗したとき（Chrome対応）に実行される
172
+
173
+
174
+
175
+ // src属性を復元
176
+
129
177
  imgElement.src = imgElement.originSrc;
130
178
 
131
179
  deferred.resolve();
@@ -142,8 +190,16 @@
142
190
 
143
191
  $.when.apply(null, promiseArray).done(function() {
144
192
 
193
+ // すべてのPromiseオブジェクトがresolveされたときに実行される
194
+
195
+
196
+
145
197
  $('.gallery').fadeIn(1500);
146
198
 
147
199
  });
148
200
 
149
201
  ```
202
+
203
+
204
+
205
+ ちゃんと理解したいとのことなので、コメントをつけました。

2

Chrome対応

2019/10/05 21:27

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -90,42 +90,60 @@
90
90
 
91
91
  スムーズに表示されますね。
92
92
 
93
+
94
+
95
+ Chromeで表示されなくなってしまっていたので、その対応を行いました。
96
+
93
97
  ```JavaScript
94
98
 
95
- var promiseArray = [];
99
+ var promiseArray = [];
96
100
 
97
101
 
98
102
 
99
- $('.im').each(function(index, imgElement) {
103
+ $('.im').each(function(index, imgElement) {
100
104
 
101
- promiseArray.push(loadImg(imgElement));
105
+ promiseArray.push(loadImg(imgElement));
102
106
 
103
- });
107
+ });
104
108
 
105
109
 
106
110
 
107
- function loadImg(imgElement) {
111
+ function loadImg(imgElement) {
108
112
 
109
- imgElement.originSrc = imgElement.src;
113
+ imgElement.originSrc = imgElement.src;
110
114
 
111
- imgElement.src = "";
115
+ imgElement.src = '';
116
+
117
+ var imgObj = new Image();
118
+
119
+ imgObj.src = imgElement.originSrc;
112
120
 
113
121
 
114
122
 
123
+ var deferred = $.Deferred();
124
+
125
+ imgObj.decode().catch(function() {})
126
+
127
+ .finally(function() {
128
+
115
- imgElement.src = imgElement.originSrc;
129
+ imgElement.src = imgElement.originSrc;
130
+
131
+ deferred.resolve();
132
+
133
+ });
116
134
 
117
135
 
118
136
 
119
- return imgElement.decode();
137
+ return deferred.promise();
120
138
 
121
- }
139
+ }
122
140
 
123
141
 
124
142
 
125
- $.when.apply(null, promiseArray).done(function() {
143
+ $.when.apply(null, promiseArray).done(function() {
126
144
 
127
- $('.gallery').fadeIn(1500);
145
+ $('.gallery').fadeIn(1500);
128
146
 
129
- });
147
+ });
130
148
 
131
149
  ```

1

別解追加

2019/10/05 19:32

投稿

naomi3
naomi3

スコア1105

test CHANGED
@@ -82,6 +82,50 @@
82
82
 
83
83
  }
84
84
 
85
+ ```
85
86
 
86
87
 
88
+
89
+ oikashinoaさんのdecodeを使った別解です。
90
+
91
+ スムーズに表示されますね。
92
+
93
+ ```JavaScript
94
+
95
+ var promiseArray = [];
96
+
97
+
98
+
99
+ $('.im').each(function(index, imgElement) {
100
+
101
+ promiseArray.push(loadImg(imgElement));
102
+
103
+ });
104
+
105
+
106
+
107
+ function loadImg(imgElement) {
108
+
109
+ imgElement.originSrc = imgElement.src;
110
+
111
+ imgElement.src = "";
112
+
113
+
114
+
115
+ imgElement.src = imgElement.originSrc;
116
+
117
+
118
+
119
+ return imgElement.decode();
120
+
121
+ }
122
+
123
+
124
+
125
+ $.when.apply(null, promiseArray).done(function() {
126
+
127
+ $('.gallery').fadeIn(1500);
128
+
129
+ });
130
+
87
131
  ```