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 或没有图像 src，以使其优雅地失败。目前，我的代码正确捕获错误并抛出alert('image load error!');. 但是，如果我在本地限定我的imgError函数，即将代码更改为以下内容：

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

imgErroronerror在图像加载时触发时无法再找到。in 调用的函数的范围是什么onerror，我可以imgError在不全局声明的情况下进入它的范围并且仍然能够errorFlag从内部访问imgError吗？

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

Figured it out with the help of Kevin B's comment. This was my solution: 

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 回答