6

画像をプリロードする方法は知りたくありません。ネットでたくさん見つけましたが、それがどのように機能するか知りたいです。javascript はどのように画像をプリロードできますか? つまり、ここからスニペットを試してみましたが、うまくいったとしても、画像をプリロードしていないようです。

firebug を確認すると、画像が 2 回読み込まれていることがわかります。

このコードを改善するために、それがどのように機能するか知りたいです。

これが私がすることです：

 function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            //(new Image()).src = this;
            alert(this +'  &&   ' + i++);

        });
    }

それから私はそのようなことをします:

preloader = function() {
    preload(myImages);
}

$(document).ready(preloader);

画像を表示/追加する方法は次のとおりです。

$("li.works").click(function() {
             $("#viewer").children().empty();
             $('#viewer').children().append('<img src=\'images/ref/'+this.firstChild.id+'.jpg\' alt="'+this.firstChild.id+'" \/>')
             $("#viewer").children().fadeIn();
4

5 に答える 5

11

基本的な Javascript プリローダーはこれを行います。

var image = new Image();
image.src = '/path/to/the/image.jpg';

これが機能する方法は、新しい Image オブジェクトを作成し、その src を設定するだけで、ブラウザが画像を取得します。この特定の画像をブラウザーに追加するわけではありませんが、設定した方法でページに画像を表示するときが来たら、ブラウザーは既にその画像をキャッシュに保持しており、再度取得することはありません。ただし、コードを見ないと、なぜあなたが持っているものがこのように機能しないのか、私にはわかりません。

この質問で説明されている興味深い落とし穴の 1 つは、画像の配列があり、同じ Image オブジェクトを使用してそれらすべてをプリロードしようとするとどうなるかということです。

var images = ['image1.jpg','image2.jpg'];
var image = new Image();
for(var x = 0; x < images.length; x++) {
    image.src = images[x];
}

オブジェクトのソースを変更するためにループが再び発生する前に、残りのイメージをプリロードする時間がないため、これは最後のイメージのみをプリロードします。この の例を表示します。ボタンをクリックするとすぐに 2 番目の画像が表示されるはずですが、最初の画像を表示しようとしたときにプリロードする機会がなかったため、最初の画像をロードする必要があります。

そのため、一度に多くのことを行う適切な方法は次のようになります。

var images = ['image1.jpg','image2.jpg'];
for(var x = 0; x < images.length; x++) {
    var image = new Image();
    image.src = images[x];
}
于 2009-05-13T23:31:27.283 に答える
5

Javascript のプリロードは、ブラウザが使用するキャッシュ メカニズムを利用して機能します。

基本的な考え方は、リソースがダウンロードされると、一定期間クライアント マシンにローカルに保存されるため、次に表示する必要があるときに、ブラウザがネット経由でリソースを再度取得する必要がありません。 /ブラウザで使用。

あなたのコードはおそらく問題なく動作しており、Fire Bug が表示しているものを誤解しているだけです。

この理論をテストするには、クリーンなキャッシュで www.google.com にアクセスしてください。つまり、最初にダウンロード履歴を消去します。

すべてを初めて実行すると、ステータスが 200 OK になる可能性があります。ブラウザがリソースを要求し、サーバーがそれを送信したことを意味します。Fire Bug ウィンドウの下部を見ると、ページが 195Kb であったことと、キャッシュから取り出されたページの量が表示されます。この場合は 0Kb です。

次に、キャッシュをクリアせずに同じページをリロードすると、FireBug に同じ数のリクエストが表示されます。

この理由は非常に簡単です。ページは変更されておらず、以前と同じリソースがすべて必要です。

異なる点は、これらのリクエストの大部分でサーバーが 304 Not Modified Status を返したため、ブラウザがキャッシュをチェックして、リソースがローカルに保存されているかどうかを確認したことです。そのため、ブラウザはローカル キャッシュからリソースをプルしただけです。

Fire Bug ウィンドウの下部を見ると、ページ サイズは同じ (195Kb) であることがわかりますが、その大部分 (私の場合は 188Kb) がキャッシュからローカルに取り出されたことがわかります。

そのため、キャッシュは機能し、2 回目に Google にアクセスしたときに、188Kb のダウンロードを保存しました。

画像をプリロードしても同じことがわかると思います。リクエストは引き続き行われますが、サーバーが 304 のステータスを返した場合、画像は実際にはネットワークではなくローカル キャッシュから取得されたものであることがわかります。

したがって、キャッシングの利点は、将来のすべてのリソース要求を無効にすることではありません。つまり、Uri ルックアップは引き続きネットに対して行われますが、可能であれば、ブラウザーはコンテンツの必要性を満たすためにローカル キャッシュから取得します。それを求めてネットを駆け巡る。

于 2011-10-08T10:11:30.353 に答える
1

新しい DOM 画像オブジェクトを作成し、src属性を設定するだけです。賢いものは何もなく、私の知る限り、それは常に私にとってうまくいきました。

2番目の「ロード」firebugがキャッシュからロードしていることを示している可能性はありますか?

于 2009-05-13T23:31:53.150 に答える