Javascriptのピクチャの遅延荷重の実例

Javascriptのピクチャの遅延荷重の実例
役割:ページを開く速度を保証する(3 s以内にページを開けないと、すでに死亡ページになります)
原理:
    1)最初の画面の内容の中の画像について:まず対応するエリアにデフォルトの画像を一枚置くと位置を占めています(デフォルトの画像は非常に小さい必要があります.普通は5 kb以内で維持できます.)、最初の画面の内容が全部読み込まれたら(または遅延時間を与えてもいいです.)、真の画像のロードを開始します.
    2)他の画面の画像に対しても、デフォルトの画像がビットを占めています.スクロールバーが対応するエリアにスクロールされると、私たちは真実の画像をロードし始めます.
    拡張:データの非同期ローディング:最初は前の2画面のデータだけをロードしてバインディングし、後のデータは処理しません.ページが対応するエリアにスクロールされると、データを再要求し、レンダリングデータをバインドします.
まず、タグの中のsrcを空にして、imgdisplay:noneにします.外のdivの上の背景図の上で1つの背景のピクチャーを結び付けて、それからページがロードし終わったことを待って、ピクチャーをロードしています.
タイマーまたはwindow.onloadイベントを使用して、獲得したurlアドレスを要素imgタグ上のsrcに結び付ける.ただし、取得した実画像のアドレスが誤ったsrcアドレスである場合は、コンソールがエラーを起こすだけでなく、ページにスクラップ/フォーク図が表示され、視覚に影響を与え、以下がイベント処理です.

 var oImg = new Image; //       img  

 oImg.src =    img src  

 oImg.onload=function(){ //->          

  img.src = this.src；

  img.syule.disolay = 'block'；

  oImg = null; //     

 }

 

ウェブサイトの性能最適化:
1、サーバ側に要求する回数をできるだけ減らす「HTTP要求を減らす」
2、css/jsファイルを統合する
3、ICON写真を合併する->スプライト/css script
4、画像の遅延荷重
5、データの非同期ロード
6、モバイル端末で、我が国は簡単な宣伝ページを作って、できるだけcssとjsを埋め込み式に書きます.
以上はJavascriptのピクチャーの遅延のロードの解説で、もし疑問があればメッセージを残してあるいは当駅のコミュニティまで交流して討論して下さい、共に進歩して、ありがとうございます.読んで、みんなを助けることができることを望んで、ありがとうございます.