Question

我正在构建一个gallery-slider-script并尝试在将它们附加到图库之前预先加载图像。

我的设计应该做到以下几点：

加载图像并将它们附加到DOM中，形成一个不可见的preloadContainer。
如果加载成功，请加载一个回调函数，检查所有图像是否已预加载（“noOfPreloadedImages ++; if（noOfPreloadedImages == noOfImagesToLoad）...”）。
如果由于无法使用图片资源而导致加载失败，请调用错误回调函数。

以下是我的代码的复杂“完整”版本：

                $('<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!");
    }

});

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

Answer 1

这并不意味着它无法完成，但我实际上从未见过附加到DOM对象的错误处理程序。

如果在页面的onload事件中执行$.ajax()怎么样？然后，您可以将正确的回调附加到相应的事件。

Answer 2

我写了一个完美运行的图像预加载器模块。它使用普通的旧JavaScript，这意味着您可以在加载jQuery之前开始预加载图像。它还会触发回调并等待jQuery加载，然后再触发回调，如果你想要它。检查一下，如果你最终使用它，请告诉我：http://test.neilgirardi.com/

上面的URL包含一个演示，它预先加载3.1MB的图像并触发jQuery .cycle（）幻灯片作为回调。

使用jQuery预加载图像：始终调用错误处理程序

2 个答案: