動的画像読み込み技術の応用と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コード
推薦する
Webpack5-react スキャフォールディングをゼロから構築するための実装手順 (ソースコード付き)
目次ウェブパック5公式スタート建築ガイド構築を開始する依存する準備が完了したら、プロジェクトの構築を...
MySQL イベント スケジューラに関するよくある話 (必読)
概要MySQL には独自のイベント スケジューラもあり、これは Linux の crontab ジョ...
Centos サーバーで nginx を設定する方法の例
セキュアターミナルMobaXterm_Personalをダウンロードまず、安全なターミナルをダウンロ...
CentOs システムで Python と yum をアンインストールするソリューション
事故の背景: 数日前、プロジェクトの必要性により、サーバーに python-mysql モジュールを...
MySQL 学習: データベース テーブルの 5 つの主要な制約を初心者向けに詳しく説明します
目次1. 制約の概念と分類2. 5つの制約の追加と削除2.1 制約を追加する6つの方法2.2 制約を...
JavaScript 組み込みの日付と時刻の書式設定のサンプル コード
1. 基礎知識（日付オブジェクトのメソッド） 😜 getFullYear() は年を表す4桁の数字を...
JS ES6コーディング標準の詳細な説明
目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...
Vue はトークンの有効期限が切れると自動的にログインページにジャンプする機能を実装します
このプロジェクトは最近テストされ、テスターから、トークンの有効期限が切れたため、ルートが自動的にログ...
CSS 水平方向の中央揃えと最大幅の制限
CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...
Win10 での MySQL 5.7 の詳細なインストールと設定のチュートリアル
1. MySQL 5.7を解凍する2. 新しい設定ファイルmy.iniを作成し、 D:\Free\m...
html の img src="" で js 関数または js 変数を呼び出して、画像パスを動的に指定します。
この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...
Nginxはドメイン名のアクセス方法を定義しています
最近Nginxを構築しているのですが、ドメイン名でアクセスできません。 nginx 構成ファイル n...
Vue の this.$router と this.$route の違いと push() メソッド
公式文書には次のように記されている。ルーターを挿入することで、どのコンポーネントでも this.$r...
Nginxポーリングアルゴリズムの基本的な実装方法の詳細な説明
ポーリングアルゴリズムの紹介多くの人が職場で nginx を使用しており、その設定に精通しています。...
Linux で削除できないファイル/フォルダの解決方法
序文最近、弊社のサーバーがハッカーの攻撃を受け、一部のファイルの属性が変更されたため、ウイルスファイ...