2

サーバーで生成された多数の画像を小さなWebサイトにプリロードしようとしています。プリロードはsetWindowTimeoutを使用して実行され、Imageオブジェクトを使用して、onloadコールバックを設定してから、新しいリクエストURIを適用します。

一部のリクエストでは、サーバーは画像が「変更されていない」ことを通知する必要があり、小さな1x1ピクセルのgifを送信して送信しています（実際の画像を送信する必要があるようです。空のコンテンツを返すと、Imageオブジェクトが発生しますオンロードを起動しないようにします）。オンロードハンドラーで、フェッチされた画像のサイズを決定してから、指定された画像でビジュアル画像を更新する必要があるかどうかを判断したいと思います。

以下は私の現在のソリューションのスニペットです（出力はデバッグに役立つdivです）：

        refresh: function() {
        var newSrc = '/screenshot.ashx?tick=' + new Date().getTime();
        var imgObj = new Image();
        var self = this;

        // this is called when load is done
        imgObj.onload = function() {
            //if (imgObj.complete) 
            //  return;
            if (imgObj.width > 1 && imgObj.height > 1) {
                output.innerHTML += '<br/>Updating image:' + newSrc;
                img.src = newSrc; //fiddler shows no reload here, read from cache
            }
            else {
                output.innerHTML += '<br/>Empty image:' + newSrc;
            }
            self.setupNewRefresh();
        };

        output.innerHTML += '<br/>Loading image:' + newSrc;
        imgObj.src = newSrc;
    },

私は2つの問題を抱えているようです：

a）imgObj.completeは、関数が最初に呼び出されたときはfalseですが、一度だけ呼び出されます（したがって、コメントアウトします）。

b）ロード時に画像の幅または高さのプロパティに依存できないようです。1x1ピクセルをフェッチするテストから、新しいImage（）を作成するときにデフォルトのように見える50が読み取られることがあり、正しいサイズの1が読み取られることもあります。

私の最終的な目標は、サーバーに新しい画像を定期的に照会する、新しい画像が何も起こらなければ何もしない（1ピクセルの画像）、または新しい画像を読み込むjavascriptロジックの小さなチャンクを用意することです。ここでは間違った方向に進んでいるか、重要なプロパティや呼び出しを見落としている可能性があるため、フィードバックをいただければ幸いです。

編集：mplungjanからの提案に応じて、代わりに非表示のdivにプリロードしました。これは、問題b）で役立ちました。それでも問題の解決策はありませんa）しかし; 完了=falseを一度報告し、再度呼び出されない

4

1 に答える 1

1

先に進んで、自分の質問に答えます。

コードレベルの要素ではなく、DOMの非表示要素に画像をプリロードすることは、実際に正しいサイズを取得するための秘訣でした（mplungjanに感謝）。a）問題、つまり完全なイベントは未解決のままです。

補足として、返されたペイロードのサイズを確認できるため、代わりにXMLHttpRequestを使用することになりました。

于 2010-07-26T09:20:13.407 に答える