Javascriptは画像のプリロードを実現します.

画像プリローディングはweb開発の中でかなり幅広い技術を応用しています.例えば、私たちは画像の反転表示などの特殊効果を行う時、画像の変換時に待っていないように、まず写真を現地にダウンロードして、その後の操作を続けて行ったほうがいいです.
以下の関数は、私たちが望む最も基本的な画像プリロード効果を実現します.

function preloadimages(arr){
    var newimages = [];
    var arr = (typeof arr != "object") ? [arr] : arr;  //        
    for(var i=0; i

幸いにも、この機能を実現するのは難しくないです.私たちはオンラインとオンerrorイベントを使って画像のロードが完了するかどうかを決定します.本論文の最終的な実現コードにおいて、私たちはproloadimags()関数を次のように改造します.上記の方法はすでに私達の基本的なプリロード画像の効果を満たしていますが、そのような状況ではない場合が多いです.画像が本当にロードされているかどうかを正確に知る必要があります.

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
    //           ，       
    //images   Array  ，         
    //images[0]         
});

まずイメージオブジェクトのonloadとoneerrorイベント処理関数を使って画像のロード状況(成功または失敗)を測定します.改造後のコードは以下の通りです.

function preloadimages(arr){
    var newimages = [];
    var loadedimages = 0;
    var arr = (typeof arr != "object") ? [arr] : arr;
    function imageloadpost(){
        loadedimages++;
        if(loadedimages == arr.length){
            alert("        ");
        }
    }
    for(var i=0; i

これから,preloadimags()関数のために,次の動作を処理するために,フィードバック関数を追加します. 
通常はpreloadimags()関数に匿名関数をパラメータとして追加し、必要な機能を達成します.その後、preloadimags()関数を呼び出すコードは以下のようになるかもしれません.

preloadimages(imagesarray, function(){
    //             
});

上のような書き方は、皆さんが見ればよく分かります.その後、preloadimags関数を改造していきます.
しかし、コードをより直感的に見えるように、少しずつ変えていくと、分かりやすくなります.改造が完了したら、preloadimags()関数の呼び出しは次のように見えます.

function preloadimages(arr){
    var newimages = [];
    var loadedimages = 0;
    var postaction = function(){};  //       postaction  
    var arr = (typeof arr != "object") ? [arr] : arr;
    function imageloadpost(){
        loadedimages++;
        if(loadedimages == arr.length){
            postaction(newimages);   //         postaction    newimages          
        }
    }
    for (var i=0; i

上のコードは少し修正しました.  
まず、画像のロードが完了した後のコールバック関数として使用されるpostaction関数を追加しました.ユーザは後から呼び出した時に、自分の処理関数で関数を上書きします.
第二に、我々のpreloadimags()関数は空のオブジェクトに戻りました.簡単なdone()方法が含まれています.これは今回の改造を実現する鍵となります.チェーンコールの実現を確保しました.
最後に、私たちの呼び出しは次のような形になりました.

preloadimages(['1.gif', '2.gif', '3.gif']).done(function(images){
    alert(images.length); //alerts 3
});

もちろん、私達はdone()の中で各種の私達の必要とするピクチャーの操作を実現することができます.