7

画像を生成する ashx ファイル ハンドラーがあります。

<img src="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" />

これはすべてうまくいきます。

さて、遅延読み込みを使用したいと思います。このjquery 遅延読み込みプラグインを使用する

だから私はこのように私のhtml画像を調整しました：

<img src="imageplaceholder.gif" original-data="www.mywebsite.com/action/getimage.ashx?imageID=f8be4bf6&width=100&height=700&bgcolor=999" />

そして、次のスクリプトを追加しました。

$(function() {
   $("img").lazyload();
});

google chrome devoloper ツールのネットワーク タブで、このファイル ハンドラに対して 2 つの呼び出しが行われていることに気付きました。

ここにテスト フィドルを作成しました: link このフィドルを下にスクロールすると、画像が Google Chrome に読み込まれるときに 2 つの画像リクエストが表示されます。Firefox と IE では、これは 1 回の呼び出しで機能します。

この動作を回避する方法はありますか?

アップデート：

次のヘッダーがファイル ハンドラーで設定されます。

[0] "Server"    "Microsoft-IIS/7.5"
[1] "Set-Cookie"    "lang=nl; expires=Tue, 04-Feb-2014 13:08:56 GMT; path=/"

Response オブジェクトの Expires プロパティは次のとおりです。

context.Response.Expires = 0
4

3 に答える 3

10

根本的な問題は、Chrome が画像をキャッシュしていないことだと思います。このデモでは、ボタンをクリックするたびに Chrome が新しいリクエストを発行します。

遅延読み込みスクリプトは、最初に画像をプライベートimg要素に (事前に) 読み込み、次に画像 URL を元のimg要素に割り当てるため、2 つの要求をトリガーします。

ExpiresorCache-ControlヘッダーとLast-ModifiedorETagヘッダーを画像ハンドラーからの応答に追加して、Chrome が画像をキャッシュできるようにすることをお勧めします。(キャッシュの詳細については、Web 作成者および Web マスター向けのキャッシュ チュートリアル を参照してください。)

更新:次のようなものをイメージ ハンドラーに追加することをお勧めします ( MSDNから):

Response.Cache.SetExpires(DateTime.Now.AddSeconds(60));
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetValidUntilExpires(true);
于 2013-02-04T10:33:12.313 に答える
3

Google Chrome は$("img").attr("src", "")他のブラウザとは扱いが異なるようです。

GitHubでプラグインのソース コードを確認し、Chrome にブレーク ポイントを追加すると (段階的に進めます)、src画像の属性を の値に変更すると、画像ハンドラーの呼び出しが発生しますoriginal-data。

画像ハンドラーが問題である可能性はありますが (前にコメントしたように)、私が見つけた解決策line 115は、プラグインのソースをから変更することでした。

.attr("src", $self.data(settings.data_attribute));

に

.attr("src", "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");

新しい値は、1 ピクセル x 1 ピクセルの透過 GIF 画像の base64 でエンコードされた文字列です。

あなたのテストフィドルで、縮小版で2番目の出現を見つけます

c.data(h.data_attribute)

そしてそれをに変更します

"data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="

それでも 2 回呼び出されますが、最初の呼び出しはごくわずか (0kb?) であり、他のブラウザーはこの変更の影響を受けません。

于 2013-01-31T23:04:04.387 に答える