我正在建立一个画廊滑块脚本，并尝试预先加载的图像之前，他们追加到画廊。
我的设计应该做到以下几点：
1.加载图像并将它们附加到DOM中的不可见的preloadContainer中。
1.如果加载成功，则加载回调函数，该回调函数检查是否已预加载所有图像（“noOfPreloadedImages++;if（noOfPreloadedImages == noOfImagesToLoad）...”）。
1.如果由于图像资源不可用而导致加载失败，则调用错误回调函数。
下面是我的代码的一个复杂的“完整”版本：

$('<img />')
                .attr({'src': galleries[i].slides[j].imageUrl, 'id': 'galleryImg'+j})
                .on('load', checkPreloadComplete(i))
                .on('error', checkPreloadError(i, j))
                .attr({'src': galleries[i].slides[j].imageUrl, 'id': 'galleryImg'+j})
                .appendTo(preloadContainers[i])
                .wrap('<div id="slide'+j+'" class="slide" />');

现在，问题是，错误回调总是被调用。我试着玩函数链，没有成功。
所以，这里有一个小的测试代码，它也总是抛出错误，无论图像资源是否可用：

$(function() {

$(document).ready(function() {
    $("<img />")
    .attr({'src': 'http://www.google.de/images/srpr/logo11w.png'})
    .on('error', errorHandler())
    .appendTo('body');
});

function errorHandler() {
    console.log("Error loading image.");
};

});

下面是一个jsFiddle：http://jsfiddle.net/SvenS/FhYQ8/
我做错了什么？我的想法错在哪里？
[编辑]
好吧，这很奇怪。一些观察：
这总是会触发错误/成功：

$(function() {

$(document).ready(function() {      
    var test = $("<img />").appendTo('body');
    test.on('error', errorHandler());
    test.on('load', successHandler());
    test.attr({'src': 'http://www.google.de/images/srpr/logo11w.png'});
});

function errorHandler() {
    console.log("Error loading image!");
};

function successHandler() {
    console.log("Image loaded successfully!");
}

});

但奇怪的是，这是有效的：

$(function() {

    $(document).ready(function() {          
        var test = $("<img />").appendTo('body');
        test.on('error', function(e) { errorHandler(); });
        test.on('load', function(e) { successHandler(); });
        test.attr({'src': 'http://www.google.de/images/srpr/logo11w.png'});
    });

    function errorHandler() {
        console.log("Error loading image!");
    };

    function successHandler() {
        console.log("Image loaded successfully!");
    }

});

我真的不明白为什么，也许有更深层次的理解可以帮助我...？