質問編集履歴
1
解決策の表示
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,31 +1,18 @@
|
|
|
1
1
|
jQuery:3.1.1(Google CDN利用)
|
|
2
2
|
|
|
3
|
+
問題
|
|
3
|
-
|
|
4
|
+
srcが空の際と、リンク切れの際に代替画像を表示させたい。
|
|
4
5
|
|
|
6
|
+
以下のようにすることで解決いたしました
|
|
5
|
-
```
|
|
7
|
+
```jQuery
|
|
6
8
|
$(document).ready(function () {
|
|
7
|
-
|
|
9
|
+
//srcが空の際、代替画像を表示
|
|
8
|
-
|
|
10
|
+
$('img[src=""]').attr('src', 'data:image/png;base64,...');
|
|
9
|
-
});
|
|
10
|
-
})
|
|
11
|
-
```
|
|
12
11
|
|
|
13
|
-
しかしこれではsrcがそもそも空であった時に反応しないため、空の際の処理を考えているのですが、うまく動きません。
|
|
14
|
-
|
|
15
|
-
こんな感じだろうかと試してみたのが以下のものになります。
|
|
16
|
-
```
|
|
17
|
-
|
|
12
|
+
//srcがリンク切れ等エラーの際、代替画像を表示
|
|
18
13
|
$('img').on('error', function () {
|
|
19
|
-
$(this).attr('src', '
|
|
14
|
+
$(this).attr('src', 'data:image/png;base64,...');
|
|
20
15
|
});
|
|
21
16
|
})
|
|
22
|
-
$(document).ready(function () {
|
|
23
|
-
if ($('img').attr('src', '')) {
|
|
24
|
-
$(this).attr('src', '404.png');
|
|
25
|
-
}
|
|
26
|
-
})
|
|
27
17
|
```
|
|
28
|
-
|
|
18
|
+
代替画像が見つからないと無限ループになるため、Data URIを使用する。
|
|
29
|
-
|
|
30
|
-
しかし動かないどころか、ページのロードが極端に長くなってしまいました...
|
|
31
|
-
原因と対処の仕方をお願いできますでしょうか
|