3

HEADjQueryのメソッドを介して送信しているリクエストは、$.ajax({...});ヘッダーだけでなく、指定されたリソースのコンテンツを返しているようです（少なくともFirefoxでは... IEは正常に機能しているようです）。画像プリローダーで使用するために、ヘッダープロパティのみをキャプチャしようとしてContent-Lengthいますが、をクエリするだけでContent-Length、コンテンツ自体がダウンロードされたようです。

ここでの操作の順序は次のとおりです。

  • CSSを使用して特定のページのすべての要素を検索しbackground-image、配列（imageTemp）にURLを入力します。
  • 画像のURLごとに、AjaxHEADリクエストを実行して、を取得しContent-Lengthて追加しbytesTotal、配列（imageData）にURLとその画像の両方を入力しますContent-Length。
    • 同時に、イベントハンドラーを開始して、すべてのAjax要求が完了しsetIntervalたかどうかを定期的に確認します。HEAD
  • リクエストが完了したら、からオブジェクトHEADへの画像の読み込みを開始し、関連する画像の値を値に追加します。\Image()imageDataContent-LengthbytesLoaded
  • bytesLoaded == bytesTotal画像の読み込みが完了し、プリローダーが完了したとき。

現在の私のスクリプトは次のとおりです。

(function($){

    var callbacks = {
        initiate: function(){},
        progress: function(percent){},
        complete: function(){},
    };

    var imageTemp = Array();
    var imageData = Array();
    var imageCurrent = null;
    var intervalId = 0;
    var bytesLoaded = 0;
    var bytesTotal = 0;

    $.preloader = function(arguments){

        for(var arg in arguments){
            callbacks[arg] = arguments[arg];
        }

        callbacks.initiate();
        $('*')
            .each(function(index){
                if($(this).css('background-image') != 'none'){
                    imageTemp.push($(this).css('background-image').slice(5, -2));
                }
            });

        intervalId = window.setInterval(function(e){

            if(imageData.length == imageTemp.length){
                window.clearInterval(intervalId);

                for(var i = 0; i < imageData.length; i++){

                    (function(imageIndex){
                        currentImage = new Image();
                        currentImage.src = imageData[imageIndex][0];
                        currentImage.onload = function(e){
                            bytesLoaded += parseInt(imageData[imageIndex][1]);
                            callbacks.progress(bytesLoaded/bytesTotal);
                            if(bytesLoaded >= bytesTotal){
                                callbacks.complete();
                            }
                        };
                    })(i);

                }

            }

        }, 1);

        for(var i = 0; i < imageTemp.length; i++){
            (function(i){
                $.ajax({
                    type: "HEAD",
                    async: true,
                    url: imageTemp[i],
                    success: function(message, text, response){
                        var bytes = parseInt(response.getResponseHeader('Content-Length'));
                        bytesTotal += bytes;
                        imageData.push([imageTemp[i], bytes]);
                    },
                });
            })(i);
        }

    };

})(jQuery);

これは、 Javascript /jQueryを介したAjaxHEADリクエストでの私の質問に直接関連していますが、問題が以前に解決された質問から拡張されているため、確かに重複していません。

4

2 に答える 2

2

Fiddler（または他のHTTPパケットスニファ）を設定して、実際にネットワークを通過しているもの（送信された正確な要求と受信された正確な応答）を確認することをお勧めします。これは、問題がサーバーにあるのかクライアントにあるのかをトラブルシューティングするのに役立ちます。

于 2011-01-17T21:17:18.680 に答える
1

まあそれは奇妙に見えます。これは「機能するはず」です。

これが問題であるとは断言できませんが、マビーはそうです。

HEADリクエストを実行する場合、サーバー自体は、headデータ以上のものを送信するべきではありません。あなたがそこに出ることができるほとんどすべてのウェブサーバーはこれを尊重します。

したがって、サーバーの問題が発生する可能性はほとんどありません。ただし、実行中のアプリケーションによっては可能です。

しかし、この問題は多くのクロール環境などで何度も見られ、非常に一般的な障害点はリダイレクトでした。

多くの内部ライブラリは（必要に応じて）リダイレクトに従いますが、HEADリクエストについては「忘れて」しまいます。

私はかつてRFCを調べましたが、この時点で正確に何をすべきかを完全に理解することはできませんでした。

しかし、非常に厳密に解釈されたHEADリクエストは、Locationヘッダーを提供するはずです。

しかし、ほとんどの「ユーザー」は、リダイレクトの背後にあるものすべてのヘッドデータをおそらく期待しています。

たとえば、ZendZFでは今日までこの問題が発生しています。Scrapyはそれを後のリリースで修正しました。

申し訳ありませんが、より良い答えを出すことはできませんが、この問題に関してあなたのコードは正しいように見えるので、いくつかの試行錯誤のデバッグ...

于 2011-01-17T21:12:16.247 に答える