動的画像読み込み技術の応用とjquery.lazyloadプラグインの使用例
|
アプリケーション例ウェブサイト http://www.uhuigou.net 画像の動的読み込みは目新しいものではありません。多くの大規模な Web サイトがこれを使用しています。その利点は明らかです。主にトラフィック (サーバーとクライアントを含む) を節約し、ユーザー エクスペリエンスを向上させ、ページを開く速度を向上させます。 原理は複雑ではありません。画像は元の img タグを使用し、src は読み込みなどのデフォルトの小さな画像を指します。次に、img 属性をカスタマイズして実際の画像アドレスを保存します。ユーザーが画像の場所にアクセスすると、src 値は js コントロールを通じてカスタム属性の値に変更されます。 この機能は多くのプラグインに作成されています。私が使用しているのはjquery.lazyloadです。必要な場合は、私のウェブサイトからダウンロードしてください。必要なファイルはこれだけです。もちろん、jquery.lazyloadも必要です。 使い方も非常に簡単です。元のimgタグにdata-original属性を追加して、実際の画像アドレスを保存します。例は次のとおりです。 コードをコピー コードは次のとおりです。<img class="lazy" src="http://bcs.duapp.com/uhuigou/loading.gif" data-original="http://bcs.duapp.com/uhuigou/201306200831326313.jpg" style="width: 100%; display: inline-block;"> 動的に読み込む必要のあるすべての画像に対してこれを記述します。jquery.lazyload は、data-original、style、またはその他の属性のみを認識します。必要に応じて記述できます。最後に、ページの jquery.ready イベントでそれらを初期化する必要があります。 コードをコピー コードは次のとおりです。$(function() {$("img.lazy").lazyload();}); はい、完了です！ |
<<: 太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード
推薦する
指定したディレクトリに nginx をインストールする方法の例
会社の要件により、異なる場所にある 2 つの nginx サーバーを同じマシンにインストールする必要...
LinuxシステムにISOファイルをインストールする方法
Linux システムで iso ファイルをインストールするにはどうすればいいですか?インストール手順...
MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル
MySQL 8.0のインストールと設定方法は参考までに。具体的な内容は以下のとおりです。ダウンロード...
MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル
MySQLをインストールする6つの手順（インストールパッケージのみがインストール場所を選択できます）...
Javascript を使用して、スライドバー効果のあるスライドナビゲーション プラグインを開発します。
目次1. はじめに2. 使用方法3. 開発プロセス1. モデル例2. イベントとアニメーション4. ...
フレックスレイアウトではサブアイテムの高さを維持できる
Flex レイアウトを使用すると、水平に配置すると、すべての子項目の高さが同じになることがわかります...
6つのレイアウトでのFrameLayoutの使用
序文前回はLinearLayoutについて説明しました。今回はFrameLayoutの使い方を説明し...
jQueryメソッド属性の詳細な説明
目次1. jQueryの紹介2. jQueryセレクター2.1 5つの基本セレクタ2.2 4種類の関...
Win Server 2019 サーバーの IIS 構成と Web サイトの簡単な公開
1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...
MySQL で乱数を生成し、文字列を連結する方法の例
この記事では、MySQL が乱数を生成し、文字列を連結する方法について例を使用して説明します。ご参考...
CSSアニメーションでポイント獲得効果を実現するアイデアを詳しく解説
最近のプロジェクトでは、ポイントを集める効果を作成する必要があります。 ボスの説明によると、この効果...
CSSを使用してすべての子要素を選択する方法の詳細な説明
CSS を使用してすべての子要素を再帰的に選択するにはどうすればよいですか?以下の記事では、CSS ...
vue+elementui+vuex+sessionStorage を使用して履歴タグ メニューを実装するためのサンプル コード
一般的には、左側にメニューがあった後、ページの上部に履歴タブ メニューを追加する必要があります。他の...
Vue のデータ応答性に関する詳細な理解
目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...
HTMLメタの大きな役割
メタ属性には、name と http-equiv の 2 つがあります。 name 属性は主に、We...