用AI生成Intersection Observer懒加载代码的提示词示例
提示词
Create a lazy loading image gallery using Intersection Observer API. Images should load only when they enter the viewport.
代码预览
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装は、Intersection Observer APIを使用した画像の遅延読み込みを示しています。画像はビューポートに入ったときにのみ読み込まれ、ページのパフォーマンスが向上します。
提示词解读
这个提示词展示了如何借助 Intersection Observer API 实现图片懒加载效果。其核心思路是：页面初始化时不加载所有图片，而是监听每张图片是否进入浏览器可视区域，只有当图片即将出现在屏幕中时才触发真正的加载请求。这种方式能有效减少首屏资源消耗，显著提升页面加载速度，尤其适合图片数量较多的展示型页面或瀑布流布局。
在实际开发中，你可以将生成的代码用于作品集网站、电商商品列表、博客封面图等场景。提示词生成的示例通常包含完整的 HTML 结构、CSS 占位样式以及原生 JavaScript 实现，无需引入第三方库，兼容性良好。如果想进一步扩展，可以在提示词中补充需求，例如添加淡入动画过渡效果、支持响应式图片（srcset）或结合骨架屏占位符，让用户体验更加流畅自然。此提示词适合在 ChatGPT、Claude 等主流大语言模型中使用，输出的代码可直接复制运行，也方便按需二次修改。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選