Lazy Loading con Intersection Observer: Ejemplo IA
Prompt
Create a lazy loading image gallery using Intersection Observer API. Images should load only when they enter the viewport.
VISTA DE CÓDIGO
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装は、Intersection Observer APIを使用した画像の遅延読み込みを示しています。画像はビューポートに入ったときにのみ読み込まれ、ページのパフォーマンスが向上します。
Resumen del prompt
Este prompt genera una galería de imágenes con carga diferida utilizando la API nativa de Intersection Observer del navegador. La técnica consiste en cargar las imágenes únicamente cuando el usuario las desplaza hasta que entran en la pantalla visible, evitando peticiones innecesarias al servidor durante la carga inicial de la página. El resultado es código HTML, CSS y JavaScript listo para usar, con atributos data-src en las imágenes y un observador que intercambia la fuente real en el momento preciso.
Este tipo de prompt es ideal para desarrolladores front-end que buscan mejorar el rendimiento web y la puntuación en herramientas como Lighthouse o PageSpeed Insights. Se recomienda ejecutarlo en modelos como GPT-4 o Claude, ya que generan código limpio y comentado. Para variaciones útiles, puedes pedir que incluya un efecto de desvanecimiento al cargar, soporte para imágenes responsivas con srcset, o un esqueleto de carga animado mientras la imagen no está disponible.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選