GifproGifpro
Prompt LibraryAllProgrammingImage GenerationStable DiffusionVideo GenerationMusic GenerationDesign
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

Image Lazy Loading with IntersectionObserver

プログラミング
DeepSeek

CODE PREVIEW

P

Prompt

Create a lazy loading image gallery using IntersectionObserver API. Images should load only when they enter the viewport.

この実装では、IntersectionObserver APIを使用して画像がビューポートに入るタイミングを検出します。画像は最初はdata-src属性のみを持ち、表示されるようになった時点で実際のソースを読み込みます。オブザーバーは50pxのルートマージンで設定され、画像がビューポートに入る少し前から読み込みを開始します。

Prompt Overview

This implementation uses the IntersectionObserver API to detect when images enter the viewport. Images start with only a data-src attribute and load the actual source when they become visible. The observer is configured with a 50px root margin to start loading images slightly before they enter the viewport.

Was this prompt helpful?

Comments

Comments appear after moderation

Homeヘルプ