回答編集履歴
3
追記の位置を修正
test
CHANGED
|
@@ -1,9 +1,3 @@
|
|
|
1
|
-
# 追記
|
|
2
|
-
### 例示の際のドメインについて
|
|
3
|
-
試したものに記載のドメイン`abcde.com`は実在するものです。
|
|
4
|
-
もし、あなたが管理されているドメインでない場合は`example.com`など例示用として予約されているドメインを用いるのが望ましいです。
|
|
5
|
-
（以下回答のドメインも修正しました。）
|
|
6
|
-
# 追記前回答
|
|
7
1
|
試行錯誤されているようなので、サンプルを提示します。
|
|
8
2
|
あくまで私ならこんな感じで実装するよといったものです。
|
|
9
3
|
処理内容についてはソース内のコメントを参照してください。
|
|
@@ -65,3 +59,8 @@
|
|
|
65
59
|
|
|
66
60
|
今回、エラーになった時に再取得処理を行いたいので、サンプルソースではエラーのイベントハンドラ内で関数を再呼出してループを実現しています。
|
|
67
61
|
|
|
62
|
+
# 追記
|
|
63
|
+
### 例示の際のドメインについて
|
|
64
|
+
試したものに記載のドメイン`abcde.com`は実在するものです。
|
|
65
|
+
もし、あなたが管理されているドメインでない場合は`example.com`など例示用として予約されているドメインを用いるのが望ましいです。
|
|
66
|
+
（回答ソースのドメインも修正しました。）
|
2
サンプルのドメインについて追記
test
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
# 追記
|
|
2
|
+
### 例示の際のドメインについて
|
|
3
|
+
試したものに記載のドメイン`abcde.com`は実在するものです。
|
|
4
|
+
もし、あなたが管理されているドメインでない場合は`example.com`など例示用として予約されているドメインを用いるのが望ましいです。
|
|
5
|
+
（以下回答のドメインも修正しました。）
|
|
6
|
+
# 追記前回答
|
|
1
7
|
試行錯誤されているようなので、サンプルを提示します。
|
|
2
8
|
あくまで私ならこんな感じで実装するよといったものです。
|
|
3
9
|
処理内容についてはソース内のコメントを参照してください。
|
|
@@ -5,8 +11,8 @@
|
|
|
5
11
|
```html
|
|
6
12
|
<!-- data-src属性に画像のURLを指定 -->
|
|
7
13
|
<!-- 可変部分は"{}"で表記 -->
|
|
8
|
-
<img data-src="https://a
|
|
14
|
+
<img data-src="https://example.com/abcde/v{}/img01.jpg">
|
|
9
|
-
<img data-src="https://a
|
|
15
|
+
<img data-src="https://example.com/abcde/v{}/img02.jpg">
|
|
10
16
|
|
|
11
17
|
<script>
|
|
12
18
|
const loadImg = () => {
|
|
@@ -24,7 +30,7 @@
|
|
|
24
30
|
// data-src属性の値を取得
|
|
25
31
|
const srcTempl = imgNode.dataset.src;
|
|
26
32
|
|
|
27
|
-
const updateSrc =
|
|
33
|
+
const updateSrc = ver => {
|
|
28
34
|
// img要素を生成
|
|
29
35
|
const img = new Image();
|
|
30
36
|
|
1
誤字の修正、ソース内のコメント追記
test
CHANGED
|
@@ -3,10 +3,8 @@
|
|
|
3
3
|
処理内容についてはソース内のコメントを参照してください。
|
|
4
4
|
|
|
5
5
|
```html
|
|
6
|
-
<!--
|
|
7
|
-
|
|
6
|
+
<!-- data-src属性に画像のURLを指定 -->
|
|
8
|
-
|
|
7
|
+
<!-- 可変部分は"{}"で表記 -->
|
|
9
|
-
-->
|
|
10
8
|
<img data-src="https://abcde.com/abcde/v{}/img01.jpg">
|
|
11
9
|
<img data-src="https://abcde.com/abcde/v{}/img02.jpg">
|
|
12
10
|
|
|
@@ -20,16 +18,17 @@
|
|
|
20
18
|
const MAX_VER = 10;
|
|
21
19
|
|
|
22
20
|
// data-src属性が指定されたimgタグを検索
|
|
21
|
+
// 該当のタグそれぞれに処理を適用する
|
|
23
22
|
document.querySelectorAll('img[data-src]').forEach(imgNode => {
|
|
24
23
|
|
|
25
|
-
// data-src属性の値
|
|
24
|
+
// data-src属性の値を取得
|
|
26
25
|
const srcTempl = imgNode.dataset.src;
|
|
27
26
|
|
|
28
|
-
const updateSrc = (
|
|
27
|
+
const updateSrc = (ver) => {
|
|
29
28
|
// img要素を生成
|
|
30
29
|
const img = new Image();
|
|
31
30
|
|
|
32
|
-
// srcTemplの置換対象文字列を数字に置換してimg要素のsrcに設定
|
|
31
|
+
// srcTemplの置換対象文字列を数字(ver)に置換してimg要素のsrcに設定
|
|
33
32
|
const src = srcTempl.replace(REPLACE_STR, ver);
|
|
34
33
|
img.src = src;
|
|
35
34
|
|
|
@@ -38,10 +37,10 @@
|
|
|
38
37
|
img.onload = () => imgNode.src = img.src;
|
|
39
38
|
|
|
40
39
|
// 画像読み込み失敗時のイベントハンドラ
|
|
41
|
-
// バージョンがMAX_VER未満であれば数
|
|
40
|
+
// バージョンがMAX_VER未満であれば数字をカウントアップして再帰を行う
|
|
42
|
-
img.onerror = () => ver < MAX_VER && updateSrc(
|
|
41
|
+
img.onerror = () => ver < MAX_VER && updateSrc(ver + 1);
|
|
43
42
|
};
|
|
44
|
-
updateSrc(
|
|
43
|
+
updateSrc(INIT_VER);
|
|
45
44
|
});
|
|
46
45
|
};
|
|
47
46
|
loadImg();
|