1

私が取り組んでいるプロジェクトには、次の関数があります。

var makePreviewSimulationDiv = function(){
    var errorFlag = false;

    imgError = function(image){
        errorFlag = true;
    };

    var that = this, proxy = new IAProxy(),
        //imageSource = real_image_source,
        imageSource = "",
        image = that.append('<img class="foo" onerror="imgError(this);
                            "src=' + imageSource + '></img>')
                    .children('.sim-ui-preview-sim-image'),
        container = image.run(encapsulateImg),
        iconsDiv = that.append('<div class="bar"></div>')
                       .children('.bar');

    if (!errorFlag){
        image.load(function(){
            container.run(zoomMaxWidth)
                .run(makeDraggable)
                .run(makeZoomable);
        });
    } else{
        alert('image load error!');
    }

    return that;
};

現在、""正常に失敗するように、関数が不正な画像srcを取得した場合、または画像srcがない場合に、関数の動作をデバッグしようとするようにimagesrcを設定しています。現在、私のコードはエラーを正しくキャッチしてスローしていますalert('image load error!');。ただし、imgError関数のスコープをローカルに設定する場合、つまりコードを次のように変更する場合：

    var imgError = function(image){
        errorFlag = true;
    };

imgErroronerror画像の読み込み時にトリガーが発生すると、検出されなくなります。で呼び出される関数のスコープは何ですか。グローバルに宣言せずに、内部からアクセスできる状態で、そのスコープonerrorに移動できますか？imgErrorerrorFlagimgError

4

2 に答える 2

1

で画像を作成する

var img = new Image()

エラーハンドラーとロードハンドラーにバインドし、srcを次のように設定します

$(img).on("load",loadHandler).on("error",errorHandler)[0].src = imageSource;

これで、前述の両方のハンドラーの内部で、にアクセスでき、前述のハンドラーthisの最初の引数はになりますevent object。

function errorHandler(event) {
    console.log(event);
}
function loadHandler(event) {
    console.log(event);
    $(this).appendTo("#imgHolder");
}
于 2013-03-25T20:21:29.737 に答える
0

ケビンBのコメントの助けを借りてそれを理解しました。これが私の解決策でした： 

var makePreviewSimulationDiv = function(){
    var errorFlag = false;

    var that = this, proxy = new IAProxy(),
        image = that.append('<img class="foo"></img>').children('.foo'),
        imageSource = ""; //a source that should cause an error


    var imgError = function(image){
        errorFlag = true;
    };

    image.on("error",imgError)[0].src = imageSource

    var container = image.run(encapsulateImg),
        iconsDiv = that.append('<div class="bar"></div>').children('.bar');

    if (!errorFlag){
        image.load(function(){
            container.run(zoomMaxWidth)
                .run(makeDraggable)
                .run(makeZoomable);
        });
    } else{
        alert('image load error!');
    }

    return that;
};
于 2013-03-25T20:23:35.187 に答える