質問編集履歴
2
質問がわかりづらいため編集いたしました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -16,21 +16,19 @@
|
|
|
16
16
|
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
-
上記の画像を768px未満の場合のみに表示させたい場合、pictureタグを使ってその制御を行うことは可能でしょうか？
|
|
20
19
|
|
|
20
|
+
|
|
21
|
-
|
|
21
|
+
両デバイスで画像を表示させる場合はこれで良いのですが、例えば下記の画像を768px未満の場合のみに表示させたい場合、769px以上の環境でdisplayで非表示にしてしまうとバックグランドで読み込みが走ってしまうため、pictureタグで上手く出し分けができないでしょうか？
|
|
22
|
+
|
|
23
|
+
|
|
22
24
|
|
|
23
25
|
```
|
|
24
26
|
|
|
25
|
-
<picture>
|
|
26
|
-
|
|
27
|
-
<source media="(min-width: 768px)" srcset="">
|
|
28
|
-
|
|
29
27
|
<img src="dummy" alt="dummy image">
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
```
|
|
32
30
|
|
|
33
|
-
|
|
31
|
+
|
|
34
32
|
|
|
35
33
|
いつもはCSSで表示非表示を切り替える方法を取っているんですが、それだとバックグラウンドで読み込みが走ってしまうため、pictureタグあるいは別の方法で無駄な読み込みを走らせずにうまく出し分けが出来る方法はないか探しています。
|
|
36
34
|
|
1
質問分におかしな部分があり、ご指摘頂いたため質問内容を変更しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,16 +2,38 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
例えば画面幅768pxで画像の出し分けを行う場合、下記のコードになるかと思います。
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```
|
|
8
8
|
|
|
9
|
+
<picture>
|
|
10
|
+
|
|
11
|
+
<source media="(min-width: 768px)" srcset="dummy768">
|
|
12
|
+
|
|
13
|
+
<img src="dummy" alt="dummy image">
|
|
14
|
+
|
|
9
|
-
|
|
15
|
+
</picture>
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
上記の画像を768px未満の場合のみに表示させたい場合、pictureタグを使ってその制御を行うことは可能でしょうか？
|
|
20
|
+
|
|
21
|
+
やりたいこととしては下記ですが下記のコードだとうまく動きません。
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<picture>
|
|
26
|
+
|
|
27
|
+
<source media="(min-width: 768px)" srcset="">
|
|
28
|
+
|
|
29
|
+
<img src="dummy" alt="dummy image">
|
|
30
|
+
|
|
31
|
+
</picture>
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
いつもはCSSで表示非表示を切り替える方法を取っているんですが、それだとバックグラウンドで読み込みが走ってしまうため、pictureタグあるいは別の方法で無駄な読み込みを走らせずにうまく出し分けが出来る方法はないか探しています。
|
|
10
36
|
|
|
11
37
|
|
|
12
38
|
|
|
13
|
-
displayで非表示にするのも無駄な読み込みが増えますしスマートではないなと思っています。
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
ご回答よろしくお願いします。
|
|
39
|
+
ご回答よろしくお願いいたします。
|