HTML、CSS、jQuery: 画像の遅延読み込みに関するヒント

HTML、CSS、jQuery: 画像の遅延読み込みを実装するためのヒント

最近の Web サイトでは、画像の遅延読み込みは、Web サイトの読み込みを改善できる一般的な最適化手法です。パフォーマンスを向上させ、サーバーの負荷を軽減します。画像を遅延読み込みすることで、ユーザーが表示領域までスクロールしたときにのみ画像を読み込むことで、帯域幅を節約し、ページの読み込みを高速化できます。この記事では、HTML、CSS、jQuery を使用して画像の遅延読み込みを実装する方法を紹介し、具体的なコード例を示します。

1. HTML 構造
まず、HTML で、遅延読み込みする必要がある各画像のプレースホルダーを追加する必要があります。このプレースホルダーは、CSS スタイルを使用して設定された通常の div 要素にすることができます。幅と高さページレイアウトを安定させるため。

上記のコードでは、image-containerは画像のコンテナを表し、placeholderは画像が読み込まれる前に表示されるプレースホルダーです。imgタグのdata-src属性は画像の実際のアドレスを格納し、alt属性は画像の代替テキストを提供します。

2. CSS スタイル
次に、プレースホルダーと画像の CSS スタイルを設定する必要があります。

.image-container { position: relative; width: 100%; height: 0; padding-bottom: 75%; /* 设置高度占比 */ } .placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f3f3f3; /* 设置占位符背景颜色 */ } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* 等比例缩放填充容器 */ opacity: 0; /* 图像透明度为0，初始状态不显示 */ transition: opacity 0.3s ease; /* 添加过渡效果 */ }

上記のコードでは、.image-containerは相対位置を使用し、幅を 100% に、高さを 0 に設定し、padding-bottomを渡します。属性 高さの比率が設定されており、特定のニーズに応じて調整できます。.placeholder絶対位置を設定し、コンテナ全体を塗りつぶし、背景色を設定します。img絶対位置を設定し、画像をコンテナの左上隅に配置し、幅と高さを 100% に設定し、object-fitを使用して画像の比率を維持します。初期状態では透明度が0でトランジション効果が付加されています。

3. jQuery の遅延読み込み
最後に、jQuery を使用して画像の遅延読み込みを実装します。ページが読み込まれた後、ユーザーが表示領域までスクロールすると、画像のdata-src属性値をsrc属性に割り当て、透明度を 1 に変更して実現します。画像のショー。

$(window).on('scroll', function () { $('.image-container').each(function () { if ($(this).offset().top < $(window).scrollTop() + $(window).height()) { var $img = $(this).find('img'); $img.attr('src', $img.data('src')); $img.css('opacity', 1); } }); });

上記のコードでは、ユーザーがページをスクロールするときに、offset().topを使用して各画像コンテナの上部の位置を取得します。これはscrollTop と同じです。 ()とheight()を比較して、表示領域までスクロールされたかどうかを判断します。その場合は、画像のdata-src属性値をsrc属性に割り当て、透明度を 1 に変更します。

これまでに、画像の遅延読み込みの実装全体が完了しました。これらの手法を使用する前に、正しく実行されるように、jQuery ライブラリと上記のコードを忘れずに含めてください。

概要
この記事では、HTML、CSS、jQuery を使用して画像の遅延読み込みを実装する方法を紹介し、具体的なコード例を示します。画像を遅延読み込みすることで、Web ページの読み込みパフォーマンスを向上させ、サーバーの負荷を軽減し、より良いユーザー エクスペリエンスを提供できます。この記事が、画像の遅延読み込みテクニックを理解して適用し、Web サイト開発時に役立つことを願っています。

以上がHTML、CSS、jQuery: 画像の遅延読み込みに関するヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。