前提・実現したいこと
JavascriptのIntersection Observer APIでの画像の遅延読み込みについて調べています。
対象の画像がビューポートの100px手前に来たときに画像の取得を開始したいと思っています。
具体的には以下の様にrootMarginの上下を100pxに設定しています。
rootMarginの設定
1const options = { 2 // 上下100pxで発火 3 rootMaring: "100px 0" 4};
※以下の記事を参考に実装を行っています。
参考記事
https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09
参考デモ
https://andus.heteml.jp/intersection_observer/1.html
今回の質問内容
実際に参考デモで動作確認を行ったところ、画像がViewportの100px手前に来たときではなく、Viewportと画像が交差したとき(画像が画面内に入ってきたとき)に発火しているように見受けられます。
他の記事も色々みて調べてみましたが、やはりrootMarginでの制御で良さそうなのですが、
どこか使い方が間違っているのでしょうか?それとも私の確認方法が間違っているのでしょうか?
何かご存知の方いらっしゃいましたら、何卒よろしくお願い致します。
確認方法
この画像はゆっくりスクロールした際に100px手前に差し掛かったときにブレークポイントで処理が止まるかを確認しています。(ブレークポイントは交差判定がtrueの時に止まるように置かれています。)表示されている画面のすぐ下には次の画像があるため、ブレイクポイントで止まる想定なのですが、実際には次の画像とViewportが交わるまで交差していない判定になっており、コンソール上のブレイクポイントで止まりません。
(実際、もう少しスクロールを行い、次の画像の上辺がViewportに差し掛かった当りでコンソール上のブレイクポイントで処理が停止します。
また、ChromeのDevToolのNetworkパネルでも確認を行いましたが、画像の100px手前ではなく、画像がViewportと交差したときに画像の取得が行われていることを確認しました。
試したこと
rootMarginを500pxにしてみましたが、変わりませんでした。
また、交差の判定条件をintersectionRatioにもしてみましたが、変わりませんでした。
if (entry.intersectionRatio > 0)
補足情報(FW/ツールのバージョンなど)
polyfillは使っていません。
Chromeで確認を行いました。
該当のソースコード
js
1(function() { 2 "use strict"; 3 4 // ターゲット指定 5 const targets = Array.from(document.querySelectorAll("img[data-src]")); 6 7 // 実際の画像パス 8 const img_path = "data-src"; 9 10 // オプション 11 const options = { 12 // 上下100px手前で発火 13 rootMaring: "100px 0" 14 }; 15 16 // 初期化 17 const observer = new IntersectionObserver(callback, options); 18 19 targets.forEach(function(img) { 20 // 監視の開始 21 observer.observe(img); 22 }); 23 24 // コールバック 25 function callback(entries, object) { 26 entries.forEach(function(entry) { 27 28 // 交差していない 29 if (!entry.isIntersecting) return; 30 31 // ターゲット要素 32 const img = entry.target; 33 34 // 遅延ロード実行 35 loading(img); 36 37 // 監視の解除 38 object.unobserve(img); 39 }); 40 }; 41 42 // 遅延ロード 43 function loading(img) { 44 // data-srcの値を取得 45 const src_val = img.getAttribute(img_path); 46 if (src_val) { 47 // 画像パスを設定 48 img.src = src_val; 49 img.onload = function() { 50 // data-src属性を削除 51 this.removeAttribute(img_path); 52 }; 53 } 54 }; 55})();
html
1 <ul> 2 <li><img src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" data-src="./img/alexander-possingham-209285.jpg" alt="" width="500" height="333"></li> 3 ... 4 </ul> 5

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/03 09:23
2019/03/03 11:20