6

私は、Web ページ上にかなりの数の画像を作成 (および削除) する継続的なサイクルを含む Web アプリケーションを作成しています。各画像はサーバーによって動的に生成されます。

var img = document.createElement("img");
img.src = "http://mydomain.com/myImageServer?param=blah";

場合によっては、これらのイメージの一部は、ダウンロードが完了する前にその有用性を失います。その時点で、それらを DOM から削除します。

問題は、それらの画像が DOM から削除された後も、ブラウザーがそれらの画像をダウンロードし続けることです。ダウンロードを待っている新しい画像があるため、ボトルネックが発生しますが、最初に古い不要な画像のダウンロードが完了するまで待たなければなりません。

不要な画像のダウンロードを中止したいと思います。明らかな解決策は、AJAX 経由でバイナリ イメージ データを要求することです (AJAX 要求は中止される可能性があるため)。ダウンロードが完了したら、img.src を設定します。

// Code sample uses jQuery, but jQuery is not a necessity

var img = document.createElement("img");

var xhr = $.ajax({
        url: "http://mydomain.com/myImageServer?param=blah",
        context: img,
        success: ImageLoadedCallback
    });

function ImageLoadedCallback(data)
{
    this.src = data;
}

function DoSomethingElse()
{
    if (condition)
        xhr.abort();
}

しかし、問題は、この行が期待どおりに機能しないことです。

this.src = data;

私は高低を検索しました。AJAX経由で送信されたバイナリ画像データに画像ソースを設定する方法はありませんか?

4

3 に答える 3

3

dataそれを実現するには、 をdata:URIに base64 エンコードする必要があります。しかし、IE6-7 では機能せず、特に IE8 では、そこに入れることができるデータの量に制限があります。サポートされているブラウザの最適化として行う価値はあるかもしれませんが、私はそれに依存しません。

もう 1 つの方法として、 を使用しXMLHttpRequestてイメージをプリロードし、応答を破棄してsrc、 newImageの を同じアドレスを指すように設定する方法があります。画像はブラウザのキャッシュからロードする必要があります。ただし、画像を動的に生成する場合は、応答がキャッシュ可能であることを確認するために、キャッシュ ヘッダーに注意を払う必要があります。

于 2010-02-25T01:56:31.707 に答える
2

試してみてください

this.src="data:image/png;base64,XXX"

... XXXbase64 でエンコードされたバイナリ データはどこにありますか。必要に応じて content-type を調整します。ただし、これに対する幅広いブラウザーのサポートについては楽観的ではありません。

于 2010-02-25T01:42:21.410 に答える
0

以前の質問で特定したソリューションと同様に、データ URIを使用できるはずです。これは古いブラウザでは機能しないことに注意してください。

于 2010-02-25T01:42:51.440 に答える