AIで作るIntersection Observer遅延読み込み｜プロンプト作例
プロンプト
Intersection Observer APIを使用して遅延読み込み画像ギャラリーを作成します。画像はビューポートに入ったときにのみ読み込まれます。
CODE PREVIEW
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装は、Intersection Observer APIを使用した画像の遅延読み込みを示しています。画像はビューポートに入ったときにのみ読み込まれ、ページのパフォーマンスが向上します。
プロンプトの解説
このプロンプトは、Intersection Observer APIを活用した遅延読み込み(Lazy Loading)の実装コードをAIに生成させるものです。スクロールイベントではなくネイティブなObserver APIを使うため、パフォーマンスへの負荷が低く、画像がビューポートに入ったタイミングでのみ読み込む効率的なギャラリーのサンプルコードを得られます。
フロントエンド開発の学習や、画像点数の多いポートフォリオサイト・ECサイトの最適化を検討する場面で役立ちます。プロンプトに「rootMargin」や「threshold」の指定、またはフォールバック処理の有無を加えると、より実用的なコードが得られます。JavaScriptフレームワーク名(React・Vueなど)を追記するのも有効な応用方法です。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選