IntersectionObserverを使った画像遅延読み込み
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
IntersectionObserver APIを使用した遅延読み込み画像ギャラリーを作成します。画像はビューポートに入った時のみ読み込まれます。
この実装では、IntersectionObserver APIを使用して画像がビューポートに入るタイミングを検出します。画像は最初はdata-src属性のみを持ち、表示されるようになった時点で実際のソースを読み込みます。オブザーバーは50pxのルートマージンで設定され、画像がビューポートに入る少し前から読み込みを開始します。
このプロンプトは役に立ちましたか?
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選