Vueが勉強写真は遅延ロードこの文を持っているとき、彼自身の記録の練習後に行わ学びました。少なくとも、今はこの要求を満たしていませんでした。
この写真は、多くの時間に遅延読み込みを選択することができます。電気供給業者のサイトには、需要を持っている必要があります。
これらのプラグインはまた、jQueryのプラグインライブラリで見つけることができます。
1. Echo.jsは、遅延ロードを実装します
Echo.jsはjQueryのか、他のJavaScriptライブラリに依存しない、それが独立して使用することができます。1キロバイト未満の圧縮とEcho.js非常に小さく、。
HTML5の日付プロパティを使用してEcho.js、およびプロパティの値を取得する必要が、それはIE6、IE7互換性がありません。レイジーロードがまた、HTML5の日付属性を使用しますが、それは方法の値が同じではありません取得します。
次のように使用します。
1. JSファイルの導入
<スクリプトSRC = "JS / echo.min.js"> </ SCRIPT>
2.htmlで
< IMGのクラス= "怠惰" SRC = "画像/ blank.gif" データエコー= "画像/ビッグ-1.JPG" >
blank.gif画像は1×1であり、デフォルトの画像として使用される、プロパティ値データエコーは、ピクチャの実アドレスです。また、最高のは、画像の幅と高さを設定し、またはCSSで設定することができる、または非常に遅延ロードされます絵の下の一番下と思われます。
3.JavaScript
Echo.init（{ オフセット： 0 、 スロットル： 0 }）。
オフセット：可視領域から数ピクセルの画像がロードされる
ロード・ピクチャの数ミリ秒の遅延：スロットル
例えば：
<！DOCTYPE HTML > < HTML LANG = "CN-ZH" > < 頭> < メタのcharset = "UTF-8" > < タイトル>簡単な遅延ロードするJavaScriptライブラリ画像Echo.js </ タイトル> < スタイル> .demo IMG { 幅：736px ; 高さ：490px ; 背景：URL（イメージ/ loading.gif）50％NO-REPEAT ; } </ スタイル> </ヘッド> < 身体> < divのクラス= "デモ" スタイル= "幅：736px;マージン：0自動;" > < IMG クラス= "怠惰" SRC = "画像/ blank.gif" データエコー= "画像/ビッグ-1.JPG" > < IMG クラス= "怠惰" SRC = "画像/ blank.gif" データエコー= "画像/ビッグ-2.JPG" > < IMG クラス= "怠惰" SRC = "画像/ blank.gif" データエコー= "画像/ BIG-3.JPG" SRC = "画像/ blank.gif" データエコー= "画像/ビッグ4.JPG" > < IMG クラス= "怠惰" SRC = "画像/ blank.gif" データエコー= "画像/ BIG-5。 JPG」> < IMG クラス= "怠惰" SRC = "" blank.gif画像/ データ・エコー= "画像/ビッグ-6.jpg" > < IMG クラス= "怠惰" SRC = "" blank.gif画像/ データ-echo = "画像/ビッグ-7.jpg" > </ divの> <スクリプトSRC = "JS / echo.min.js" > </ スクリプト> < スクリプト> Echo.init（{ オフセット：0 、 スロットル：0 }）。 </ スクリプト> </ ボディ> </ HTML >
あなたは3S負荷後に実現したい場合は、以下のように、JSの改正しました：
Echo.init（{ オフセット： 0 、 スロットル： 3000 }）。
2.jquery.lazyload.js遅延ロードを実装
1.関連するJSの導入
<スクリプトSRC = "jqueryの-1.11.0.min.js"> </ SCRIPT> <スクリプトSRC = "jquery.lazyload.js？V = 1.9.1"> </ SCRIPT>
2.インタフェース：
データ原稿の画像の画像パターン遅延パスの参照メソッドを追加
< IMGのクラス= "遅延" データのオリジナル= "IMG / bmw_m1_hood.jpg" 幅= "765" 高さ= "574" ALT = "BMW M1フード" >
lazyloadと画像表示の始まりを3.js
< スクリプトタイプ= "テキスト/ javascriptの" 文字セット= "UTF-8" > $（関数（）{ $（" img.lazy " ）.lazyload（{ 効果：" フェードイン" }）; }）; </ スクリプト>
次のようにそのパラメータは次のとおりです。
$（「img.lazy」）.lazyload（{ プレースホルダ：「IMG / grey.gif」、// 予め画像プレースホルダを有する // プレースホルダは、この写真画像をロードするパスを占有する画像です。位置は、ロードされる画像は、プレースホルダのチャートが隠されている 効果：「フェードイン」を、// ロードどのような影響を与える使用して // 効果（特殊効果）を、値がショー（直接表示）され、フェードイン（フェード）、slideDown（ドロップダウン）、一般的に使用されるフェードインの しきい値：200、// ロードを開始する前に、 // しきい値、値が数値で、そこから目標位置200の高さは、あなたができる、イメージをロードするために始めた、スクロールバー、ページの高さを200に設定されている表します。ユーザが知覚させない イベント：「クリック」、 // トリガイベント時に負荷が // イベントは、値がクリック（クリック）、マウスオーバー（マウス間）、スポーティな（運動）、foobarにある（...）を達成することができます。二つの値がテストされていませんした後、画像の上でマウス以外の何者かをクリックし、負荷に始めません... コンテナ：$（「＃コンテナ」）、 // コンテナの絵の効果を達成 //をあなたは、ブラウザのスクロールバーで引っ張ったときに、コンテナ、コンテナはデフォルト値のテイク効果を.lazyload、このパラメータを使用すると、スクロールバーを引くことを可能にするときDIVひいては負荷絵で failurelimit：10 // 画像の並べ替え混乱 // failurelimit、値それは最初の領域は、画像に表示されていない見つけたとき、デジタル.lazyloadのデフォルトはもはやロードしていきませんが、画像の可視領域内の混乱がfailurelimit、無負荷のうち表示される場合がありますHTMLコンテナは負荷N張で見られることを意図しこの問題を回避するために領域の外側の画像、。 }）。
例えば：
<！DOCTYPE HTML > < HTML > < ヘッド> < メタのcharset = "UTF-8" > < タイトル>レイジーロード有効</ タイトル> </ ヘッド> < 身体> < IMG クラス= "怠惰" データ・元= "IMG / bmw_m1_hood.jpg」幅= "765" 高さ= "574" ALT = "BMW M1フッド" > < IMG クラス= "怠惰"幅= "765" 高さ= "574" ALT = "BMW M1サイド" > < IMG クラス= "怠惰" データ・元= "IMG / viper_1.jpg" 幅= "765" 高さ= "574" ALT = "バイパー1" > < IMG クラス= "遅延" データのオリジナル= "IMG / viper_corner.jpg" 幅= "765" 高さ= "574" ALT = "バイパーコーナー" > < IMG クラス= "遅延"データ元= "IMG / bmw_m3_gt.jpg" 幅= "765" 高さ= "574" ALT = "BMW M3 GT" > < IMGのクラス= "怠惰" データ・元= "IMG / corvette_pitstop.jpg" 幅= "765" 高さ= "574" ALT = "コルベットピットストップ" > < スクリプトSRC = "jqueryの-1.11.0.min.js" > </ スクリプト> < スクリプトSRC = "jquery.lazyload.js？V = 1.9.1" > </ スクリプト> < スクリプトタイプ= "テキスト/ javascriptの" 文字セット= "UTF-8"> $（関数（）{ $（"img.lazy " ）.lazyload（{ 効果：" フェードイン" }）; }）; </ スクリプト> </ ボディ> </ HTML >
開発者向けツールバーによると、あなたはまた、要求を行うネットワーク時刻を見ることができます。