0

I'm building a gallery-slider-script and try to preload the images all in advance before appending them to the gallery.

My design should do the following:

  1. Load the images and append them to the DOM into an invisible preloadContainer.

  2. If loading is successful, load a callback-function which checks, whether or not all images have been preloaded ("noOfPreloadedImages++; if(noOfPreloadedImages == noOfImagesToLoad)...").

  3. If loading failed because the image-resource is not avaible, call an error-callback-function.

Here is a complex, "full" version of my code:

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

Now, the problem is, that the error-callback is always being called. I tried playing with the function-chain, with no success.

So, here is a little test-code which also always throws an error, regardless of whether or not the image-resource is available:

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

});

Here is a jsFiddle: http://jsfiddle.net/SvenS/FhYQ8/

What am I doing wrong? Where is my thinking wrong?

[EDIT]

Ok, that was weird. Some observations:

This always triggers an error/success:

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

});

But here is what works, strangely enough:

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

});

I really don't understand why, maybe someone with a deeper understanding can help me...?

4

2 回答 2

0

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

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

于 2013-10-13T02:14:46.860 回答
-1

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

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

于 2013-10-13T03:53:20.753 回答