授業ノートを怠る

空腹の谷李棟

定義

画像怠け者

フェーズ

を実現

画像が可視範囲

であることをどのように判断するか

コード構想

パッケージ

怠け者負荷抽出

露光脱重

まとめ

一、定義
すぐにロードする必要はなく、必要に応じて何でもロードすれば非同期ロードが可能になります.
二、画像の怠惰なロード
ウィンドウをスクロールしてDOM要素が目の前に現れると、ロード(露出ロード)
フェーズ実装:
1.最も一般的で古い方法で怠惰なロードを実現する.簡単にカプセル化またはJqueryと書くプラグイン3.怠惰なロードを抽出して、露出コンポーネントになって、画像の怠惰なロードだけではなくて、いかなるものも怠惰なロードを実現することができます4.コンポーネントの継続的な改善
画像のリロード

img src="b lank.png" data-src="xxx1"
img src="b lank.png" data-src="xxx2"
...
img src="b lank.png" data-src="xxxn"

は、まず、

を占有するために空白のピクチャをロードすることができる.

真実なピクチャーのアドレスはdata-srcの中で

に置きます

画像がウィンドウに表示する(可視範囲内)場合、src属性

をdata-src属性で置き換える.

xxx.attr("src",xxx.attr("data-src"))

カスタム属性dataで始まるdata-src="//簡単な方法でdataを取得できます...

画像が可視範囲にあることをどう判断しますか?
画像は长いキャンバスで、ブラウザのウィンドウは1つのフォトフレームに相当して、ページは1枚の纸に相当して、あなたが転がる时、この纸が后ろで引くことに相当します

  1：     
    $(".content").offset().top
  2：             
    $(window).scrollTop()
  3：     
    $(window).height()

臨界点:パラメータ1=パラメータ2+パラメータ3の可視範囲、すなわち、パラメータ1<パラメータ2+パラメータ3
コード構想

デフォルトでは、ピクチャは表示されず、空白図

のみが表示される.

関数ラップ:画像が可視範囲内であるか否かを判断し、もしそうであれば、画像

を表示する.

具体的な意味判断関数

表示範囲判定でスクロールが使用するため、先頭にスクロール傍受

を追加する必要がある.

露光脱重

コード友情リンクへへへへ
パッヶージ
//ネーミングスペースを隔離できる

//       ，          ，         
var LazyImg={
init:function(){},
xx :function(){},
...
}
LazyImg.init($("img"))

もちろんJquery pluginにできます

$.fn.LazyImg=function(){
...
}
$("img").LazyImg()

第1のカプセル化手法を改良するために,自動実行関数パッケージを用い,プライベートメンバを露出しない利点がある.

var LazyImg=(function(){
  var x1=function(){}
  var x2=function(){}
    return{
    x1:x1，
    x2:x2
    }
})("img")

だらだらとたれる
//怠け者ロード画像表示という動作の関数を抜き出すだけでなく、パッケージ呼び出しではもちろん他の関数を転送し、他のDOM要素の怠け者ロードを行うことができます
露光脱重
1.ページのロードが完了すると、再度DOM要素をロードする動作をしなくなる.スクロールが停止すると、アクションが実行されます
ローテーション-怠惰ロード実装
最初は、最初の画像があるだけで、全体のマルチキャストが起動していません.ページのロードが完了した後、マルチキャストコンポーネントが起動し、スクロールを開始します.スクロールするたびに、画像が保存されているかどうかを見て、この画像をロードします.画像がロードされたと言ったら、自動的にマルチキャストを開始します.
配列を定義して、中のデータはすべてバックグラウンドから伝わってきて、いくつかのピクチャーのアドレス、循環を使うことができて、1つのsetintevalをプラスして、中のアドレスを1つ1つsrcに置き換えて、このようにして、ユーザーはピクチャーが交換していくことを見ることができて、輪番放送を実現することができます
まとめ:

$(xxx)得られたのはクラス配列//idで$(「#xxx」)を選択してもいいですが、配列の中には1つの要素しかありません.

はeach()で要素のキャッシュを巡る機能がどのように実現されるか分からない場合、まず大まかに説明します.これは関数機能が具体的に書くことができ、具体的な意味は関数で

を実現することができます.