javascriptピクチャーの怠惰なロードとプリロードの分析

9479 ワード

JavaScript

怠惰なロードとプリロードの基本概念.
怠惰な負荷も遅延ローディングといいます.前の記事に紹介があります.JS画像の読み込み遅延. 画像の読み込みを遅延させたり、条件に合わせた場合にのみ画像を読み込むことができます.
プリロード:画像を事前にロードし、ユーザーが確認する必要がある場合は、直接にローカルキャッシュからレンダリングすることができます.
二つの技術の本質:両者の行為は逆であり、一つは前倒しであり、もう一つは遅くても載せない.怠惰なローディングはサーバーの先端に一定の圧力を緩和します.プリローディングはサーバーの先端圧力を増加します.
怠惰な負荷の意味と実現方法は以下の通りである.
意味: 怠惰負荷の主な目的は、サーバのフロントエンドの最適化として要求数または遅延要求数を減らすことである.
実装:
1.第一は純粋な遅延負荷であり、setTimeOutまたはset Intervalを使って負荷遅延を行う.
2.第二は条件付きローディングで、いくつかの条件を満たすか、またはいくつかのイベントをトリガして非同期ダウンロードを開始します.
3.第三は視認エリアローディングで、つまりユーザーが見られるエリアだけをロードします.これは主に監視スクロールバーによって実現されます.一般的にユーザーがある画像を見る前に一定の距離でローディングを開始します.これにより、ユーザが引き落とした時にちょうど画像を見ることができるようになります.
プリロードの意味と実現方法は、
プリローディングは、サーバのフロントエンドの性能を犠牲にして、より良いユーザー体験と交換することで、ユーザの操作をより迅速に反映させることができる.プリロードを実現する方法は非常に多く、CSS、JS、HTMLでも大丈夫です.よく使われるのはnew Image();そのsrcを設定してプリロードを実現し、ワンロード方式でプリロード完了イベントをリロードします.ブラウザで画像をローカルにダウンロードすると、同じsrcでキャッシュが使用されます.これは最も基本的で実用的なプリロード方法です.Imageが画像ヘッダをダウンロードしたら、幅と高さが得られますので、プリロード前に画像のサイズが得られます.
どうやってプリロードができますか?
googleで検索することができます.多くの人がこのような方法でプリロードしているのを見ることができます.コードは以下の通りです.

function loadImage(url,callback) {

    var img = new Image();

    

    img.src = url;

    img.onload = function(){

        img.onload = null;

        callback.call(img);

    }

}

googleや火狐の下でテストするのは正常です.どのように更新しても正常ですが、IE 6の下ではないです.クリックしても正常に再度クリックしたり、更新したりするのは正常ではありません.以下のjsfiddle住所:興味がある人はボタンを押してから正常な結果を出して再度IE 6をクリックしてonloadの中の方法を実行しないと、また更新してもだめです.
効果を見たいです。クリックしてください。
なぜ他のブラウザが正常なのかというと、その理由は簡単です.つまり、ブラウザのキャッシュです.IE 6以外は(つまりoperaでもできますが、わざわざoperaで試してみました.ないです.バージョンの問題があります.今はもう修復されたかもしれません.)、他のブラウザの再クリックはまたOload方法を実行しますが、IE 6は直接ブラウザから取ります.
今はどうすればいいですか?一番いいのは、Imageがロードに成功したかどうかを示す状態値があります.キャッシュからロードするときは、待つ必要がないので、この状態値はダウンロード済みであることをそのまま示していますが、httpからロードを要求する場合は、ダウンロードを待つ必要がありますので、この値は未完了と表示されます.これで済みます.googleの検索で紹介されています.各ブラウザに対応するImageの属性であるcompletteeがあります.ですから、画像onloadイベントの前にこの値を判断してください.最後にコードは次のようになります.

function loadImage(url,callback) {

    var img = new Image();

    

    img.src = url;



    if(img.complete) {  //               ，        

        

        callback.call(img);

        return; //     ，     onload  

    }



    img.onload = function(){

        img.onload = null;

        callback.call(img);

    }

}

つまり、画像がブラウザキャッシュ内にある場合は、直接ブラウザキャッシュからimg.comを実行する関数を取得して戻ってきます.
しかし、上記のコードを見ることができます.画像のロードが完了したら、コールバック関数を実行できます.画像のロードを待って、画像の幅と高さを取得できます.もし私たちが先に写真のサイズを取得したいなら、どうすればいいですか?インターネットの経験は私に教えています.ブラウザは画像をロードする時に画像を見ます.まず一つの場所を占領してからゆっくりとロードします.そしてwidthとheight属性を事前に設定する必要はありません.ブラウザは画像のヘッダデータを取得することができます.これにより、Javascriptタイミングで画像のサイズ状態を検出するだけで、画像サイズが準備されている状態が分かります.コードは以下の通りです.(しかし、前提があります.この方式は私が考えたのではなく、私が書いたコードでもないです.ネット友達がまとめたコードです.私はただこのような原理があると知っています.)

var imgReady = (function(){

    var list = [],

        intervalId = null;



    //       

    var queue = function(){



        for(var i = 0; i < list.length; i++){

            list[i].end ? list.splice(i--,1) : list[i]();

        }

        !list.length && stop();

    };

    

    //          

    var stop = function(){

        clearInterval(intervalId);

        intervalId = null;

    }

    return function(url, ready, error) {

        var onready = {}, 

            width, 

            height, 

            newWidth, 

            newHeight,

            img = new Image();

        img.src = url;



        //        ，         

        if(img.complete) {

            ready.call(img);

            return;

        }

        width = img.width;

        height = img.height;



        //          

        img.onerror = function () {

            error && error.call(img);

            onready.end = true;

            img = img.onload = img.onerror = null;

        };



        //       

        var onready = function() {

            newWidth = img.width;

            newHeight = img.height;

            if (newWidth !== width || newHeight !== height ||

                //                     

                newWidth * newHeight > 1024

            ) {

                ready.call(img);

                onready.end = true;

            };

        };

        onready();

        //          

        img.onload = function () {

            // onload             onready 

            //          onready    

            !onready.end && onready();

            // IE gif       onload，  onload  

            img = img.onload = img.onerror = null;

        };

        

        

        //          

        if (!onready.end) {

            list.push(onready);

            //               ，         

            if (intervalId === null) {

                intervalId = setInterval(queue, 40);

            };

        };

    }

})();

コールは以下の通りです.
imgReady('http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg',function(''width:'+this.width+'height:'+this.height));;

JVMS-classファイルフォーマット-2