この記事はもともとリンクだった：https://www.cnblogs.com/yaoyao-sun/p/10367193.html
写真遅延ロードとプリロード
プリロード
1.1何を事前にロードされていますか？
あなたがローカルキャッシュから直接レンダリングすることができます表示する必要があるとき負荷絵は、事前にプリインストールされています。なぜプリロードを使うのか？
1.2ページのロードが空白領域を表示さや絵の効果を見ることができます比較的大きなページ画像は、ユーザーエクスペリエンスを向上させるためには、アウトゆっくりとロードされると、する必要が
これらの写真を撮るには、事前にキャッシュ、ユーザーにロードページを開いて、これらの画像はすぐに、より優れたユーザーエクスペリエンスを明らかにします。
1は、CSSの背景にロードされます。全体的なページの読み込み時間を増やします
＃予圧-01 {背景：URL（-01.png）非繰り返し-9999px -9999px。}
＃予圧-02 {背景：URL（-02.png）なしリピート-9999px -9999px。}
方法2は、JS新しい画像オブジェクト、SRCロード設定：一般的に使用される新しいイメージ（）であり、プリロード実装、およびその後のonloadコールバックメソッドプリロード終了イベントを使用するために、そのSRCを設定します。
関数プリローダ（）{
IF（document.images）{
VARのIMG1 =新しいイメージ（）。
VAR IMG2 =新しいイメージ（）;
VAR IMG3 =新しいイメージ（）;
img1.src = ";;
img2.src =" ;;
img3.src =「;;
}
}
関数addLoadEvent（FUNC）{
VAR oldonload = window.onload;
（typeof演算window.onload = '関数'！）場合は{
window.onload = FUNC;
}他{// onloadイベント中未挂载函数才执行该JS
window.onload =関数（）{
IF（oldonload）{
oldonload（）;
}
FUNC（）;
}
}
}
addLoadEvent（プリローダー）;
div.appendChild（IMG1）; // DOMに挿入
方法3、Ajaxのプリロード、新しいイメージ（）オブジェクトが設定されているSRC
window.onload =関数（）{
setTimeoutメソッド（関数（）{
// JSとCSSの要求するXHR
のvar XHR =新しいXMLHttpRequestを（）;
xhr.open（ 'GET' URLを;）;
xhr.send（）;
XHR =新しいXMLHttpRequestを（）;
xhr.open（ 'GET'、URL;）;
xhr.send（）;
//プリロード・イメージ
の新しいイメージ（）SRC =「;;。
}、1000）;
};
loadImage機能（URL、コールバック）
{
VARのIMG =新しい新しい画像（）; //事前にダウンロードした写真を達成するためにImageオブジェクトを作成
img.src = URLを、
IF（img.completeを）
{//画像をブラウザにすでにある場合キャッシング、ダイレクトコールバック関数
callback.call（IMG）;
を返す;直接返す//、onloadイベントに対処する必要はありません
}
img.onload =機能（）
{//フォトダウンロード非同期呼び出しのコールバック関数完成。
callback.call（IMG）; //コールバック関数絵が完全にダウンロードされていないとき、あなただけのimg.widthを使用している場合、このImageオブジェクトに置き換えられます
};
}
機能imgLoaded（）
{
アラート（this.width）。
}
の<input type = "ボタン"値= "loadImage"のonclick = "loadImage（ 'aaa.jpg'、imgLoaded）" />
遅延読み込み
2.1遅延ロードとは何ですか？
また、遅延ロードとして知られるレイジーローディングは、。あなたが最初に背景画像のimg要素や絵で最初の代わりに、デフォルト（プレースホルダチャート）の他の要素に必要がある場合は、このように、ページを訪問したとき
一度だけの要求に時間をレンダリングするブラウザページ。画像はブラウザの表示可能領域に表示されたら、ちょうど絵の真のパスを設定し、画像が表示されます。
2.2はなぜ絵遅延ロードを使うのか？
ある程度の時間にマルチ画面のページ数、及び画像サイズは、様々なショッピングサイト、ネットワーク、等映像素材として、比較的大きい場合。あなたは時にページをロードした場合
、明らかにサイトの読み込み速度に影響を与えるし、サーバーの負担を増加させるすべての画像をロードし、ユーザーエクスペリエンスが避けられないが、遅延ロードを採用する時間がかかるかもしれません。
原則の2.3遅延ロードコンクリート実現
ページのimg要素は、HTTPリクエストを送信する理由は、src属性を設定するためにそれ以外のブラウザでは、このイメージをダウンロードするための要求を送信しませんです。ページ内のすべての初
プレースホルダプレースホルダを有する図画像が行われ、要素にデータ-SRCのカスタムプロパティを設定し、真のパス記憶された画像は、可動真のパスを使用する必要性を取り出す際
状態はSRCに追加しました。
遅延ロード：デフォルトの画像に割り当てられた画像SRC、再び現実の画像をロードしたとき、ユーザは、画像の表示領域にスクロールバーをスクロール
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
の<meta charsetが= "UTF-8">
<タイトル> Lazyload 2 </ TITLE>
<スタイル>
IMG {
表示：ブロック;
マージン下：は50px;
高さ：200pxの。
}
</スタイル>
</ head>
<body>
<IMG SRC = "画像/ loading.gif"データSRC = "画像/ 1.png">
<IMG SRC = "画像/ loading.gif"データSRC = "画像/ 2.png">
<IMG SRC = "画像/ loading.gif"データSRC = "画像/ 3.png">
<IMG SRC = "画像/ loading.gif"データSRC = "画像/ 4 .PNG ">
return関数（）{
VARのCURTIME =新しいDate（）;
clearTimeout（タイムアウト）。
IF（CURTIME -のstartTime> =少なくとも）{
FN（）;
IF（画像[I] .getAttribute（ 'SRC'）=== '画像/ loading.gif'）{
startTime = CURTIME。
}他{
=のsetTimeoutタイムアウト（FN、ディレイ）;
}
}
}
関数lazyload（）{
VAR =フォトdocument.getElementsByTagName（ 'IMG'）;
VARのLEN = images.length;
VAR N- = 0; //位置をロードした画像を保存するために、たびから最初のピクチャ横断避ける
復帰機能（）{
VAR seeHeight = document.documentElement.clientHeightと、
VAR = document.documentElement.scrollTop scrollTopスプライト|| document.body.scrollTop;
（I = N-VARのために、私は< LEN; I ++）{
IF（画像[I] .offsetTop <seeHeight scrollTopスプライト+）{
画像[I] = .SRC画像[I] .getAttribute（ 'SRC-データ'）;
}
N-N- + = 1。
}
}
}
}
VAR LoadImages lazyload =（）;
LoadImages（）; //は、ホーム・ページ画像を初期化します
; window.addEventListener（「スクロール」、スロットル（LoadImages、500、1000）、偽の）
スロットルの//関数（スロットル）とデバウンス機能（デバウンス）プロセス、
超え//遅延、及び1000ミリ秒に500ミリ秒の間隔1000msでこの関数は、関数がすぐに実行、または関数500ミリ秒の実行を遅延され、トリガされません
。</ SCRIPT>
</ BODY>
</ HTML>
シナリオ推奨リンク
ます。https：//www.cnblogs.com/leftJS/p/11079585.htmlで再現