質問編集履歴
6
コード部分を初回投稿の状態にrevert
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
```rootMarginの設定
|
|
7
7
|
const options = {
|
|
8
8
|
// 上下100pxで発火
|
|
9
|
-
|
|
9
|
+
rootMaring: "100px 0"
|
|
10
10
|
};
|
|
11
11
|
```
|
|
12
12
|
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
// オプション
|
|
64
64
|
const options = {
|
|
65
65
|
// 上下100px手前で発火
|
|
66
|
-
|
|
66
|
+
rootMaring: "100px 0"
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
// 初期化
|
5
rootMarginのスペル修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
// オプション
|
|
64
64
|
const options = {
|
|
65
65
|
// 上下100px手前で発火
|
|
66
|
-
|
|
66
|
+
rootMargin: "100px 0"
|
|
67
67
|
};
|
|
68
68
|
|
|
69
69
|
// 初期化
|
4
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
### 確認方法
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
この画像はゆっくりスクロールした際に100px手前に差し掛かったときにブレークポイント
|
|
31
|
+
この画像はゆっくりスクロールした際に100px手前に差し掛かったときにブレークポイントで処理が止まるかを確認しています。（ブレークポイントは交差判定がtrueの時に止まるように置かれています。）表示されている画面のすぐ下には次の画像があるため、ブレイクポイントで止まる想定なのですが、実際には**次の画像とViewportが交わるまで交差していない判定になっており、コンソール上のブレイクポイントで止まりません。**
|
|
32
32
|
|
|
33
33
|
（実際、もう少しスクロールを行い、次の画像の上辺がViewportに差し掛かった当りでコンソール上のブレイクポイントで処理が停止します。
|
|
34
34
|
|
3
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
JavascriptのIntersection Observer APIでの画像の遅延読み込みについて調べています。
|
|
3
3
|
対象の画像がビューポートの100px手前に来たときに画像の取得を開始したいと思っています。
|
|
4
|
-
具体
|
|
4
|
+
具体的には以下の様にrootMarginの上下を100pxに設定しています。
|
|
5
5
|
|
|
6
6
|
```rootMarginの設定
|
|
7
7
|
const options = {
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
**他の記事も色々みて調べてみましたが、やはりrootMarginでの制御で良さそうなのですが、
|
|
24
24
|
どこか使い方が間違っているのでしょうか？それとも私の確認方法が間違っているのでしょうか？**
|
|
25
25
|
|
|
26
|
-
何卒よろしくお願い致します。
|
|
26
|
+
何かご存知の方いらっしゃいましたら、何卒よろしくお願い致します。
|
|
27
27
|
|
|
28
28
|
### 確認方法
|
|
29
29
|
|
2
日本語のおかしな記述を修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
### 確認方法
|
|
29
29
|
|
|
30
30
|
|
|
31
|
-
この画像はゆっくりスクロールした際に100px手前に差し掛かったときにブレークポイントが処理が止まるかを確認しています。画
|
|
31
|
+
この画像はゆっくりスクロールした際に100px手前に差し掛かったときにブレークポイントが処理が止まるかを確認しています。表示されている画面のすぐ下には次の画像があるため、ブレイクポイントで止まる想定なのですが、実際には**次の画像とViewportが交わるまで交差していない判定になっており、コンソール上のブレイクポイントで止まりません。**
|
|
32
32
|
|
|
33
|
-
（実際、もう少しスクロールを行い、画像の上辺がViewportに差し掛かった当りで
|
|
33
|
+
（実際、もう少しスクロールを行い、次の画像の上辺がViewportに差し掛かった当りでコンソール上のブレイクポイントで処理が停止します。
|
|
34
34
|
|
|
35
|
-
また、ChromeのDevToolのNetworkパネルでも確認を行いましたが、100px手前ではなく、画像がViewportと交差したときに画像の取得が行われていることを確認しました。
|
|
35
|
+
また、ChromeのDevToolのNetworkパネルでも確認を行いましたが、画像の100px手前ではなく、画像がViewportと交差したときに画像の取得が行われていることを確認しました。
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
1
rootMarginのスペルミスの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
```rootMarginの設定
|
|
7
7
|
const options = {
|
|
8
8
|
// 上下100pxで発火
|
|
9
|
-
|
|
9
|
+
rootMargin: "100px 0"
|
|
10
10
|
};
|
|
11
11
|
```
|
|
12
12
|
|