Question

i am still new to all the Javascript stuffs and i have to be honest that i have not yet experimented anything concerning my question.

I would like to know if there is a way or a plugin with jQuery to preloaded multiples images and call a function when the images are loaded?

Answer 1

You can use the load event for images, but they have a number of cross browser issues (it depends on what platforms you’re targeting).

var allImgs = $("#container img").filter(function() { return ! this.complete; });
var allImgsLength = allImgs.length;

allImgs.on("load", function() {
    if (--allImgsLength) {
        // Images have loaded.
    }
});

If you don’t mind including a plugin, there is waitForImages, (disclaimer: written by me) which handles this relatively nicely. 🙂

You’d use it like…

$("#container").waitForImages(function() {
    // Images have loaded.
});

If you don’t want to use jQuery at all, you can adapt the first example. If you’re only targeting modern browsers…

var allImgs = [].filter.call(document.querySelectorAll("#container img"), 
                             function(img) {
                                return ! img.complete;
                             });
var allImgsLength = allImgs.length;

[].forEach.call(allImgs, function(img) {
    img.addEventListener(function() {
        if (--allImgsLength) {
            // Images have loaded.
        }
    });
});

If you had to support old browsers…

var allImgs = document.getElementById("container").getElementsByTagName("img");
var allImgsLength = allImgs.length;
var i;
var eventCallback = function() {
                        if (--allImgsLength) {
                             // Images have loaded.
                        }
                    };

for (i = 0; i < allImgsLength; i++) {
    if (allImgs[i].complete) {
        allImgsLength--;
    }

    if (allImgs[i].addEventListener) {
        allImgs[i].addEventListener("load", eventCallback);
    } elseif (allImgs[i].attachEvent) {
        allImgs[i].attachEvent("onload", eventCallback);
    } else {
        allImgs[i].onload = eventCallback;
    }
}