動的画像読み込み技術の応用とjquery.lazyloadプラグインの使用例

アプリケーション例ウェブサイト http://www.uhuigou.net
画像の動的読み込みは目新しいものではありません。多くの大規模な Web サイトがこれを使用しています。その利点は明らかです。主にトラフィック (サーバーとクライアントを含む) を節約し、ユーザーエクスペリエンスを向上させ、ページを開く速度を向上させます。
原理は複雑ではありません。画像は元の img タグを使用し、src は読み込みなどのデフォルトの小さな画像を指します。次に、img 属性をカスタマイズして実際の画像アドレスを保存します。ユーザーが画像の場所にアクセスすると、src 値は js コントロールを通じてカスタム属性の値に変更されます。

この機能は多くのプラグインに作成されています。私が使用しているのはjquery.lazyloadです。必要な場合は、私のウェブサイトからダウンロードしてください。必要なファイルはこれだけです。もちろん、jquery.lazyloadも必要です。
使い方も非常に簡単です。元のimgタグにdata-original属性を追加して、実際の画像アドレスを保存します。例は次のとおりです。

コードをコピー

コードは次のとおりです。

動的に読み込む必要のあるすべての画像に対してこれを記述します。jquery.lazyload は、data-original、style、またはその他の属性のみを認識します。必要に応じて記述できます。最後に、ページの jquery.ready イベントでそれらを初期化する必要があります。

コードをコピー

コードは次のとおりです。

$(function() {$("img.lazy").lazyload();});

はい、完了です！

<<: 太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

>>: CSS3 ボタン境界アニメーションの実装