CODEWITHSUNDEEP
jquerycssbackgroundpreloaderimage-preloader
DavidTonarini
DavidTonarini

Reputation: 951

css background images preloader

I am having troubles making a working preloader for css background images. Here is the situation: I have several hidden elements, each one has a css background image.

When the user clicks on a "start" button, I then use jquery to show the elements (one after an other: as one is shown, the other is hidden). However, the "start" button should be available only after all the images are loaded.

I am using this preloader: 

function preloadimages(arr) {
    var newimages=[], loadedimages=0
    var postaction=function(){}
    var arr=(typeof arr!="object")? [arr] : arr

    function imageloadpost() {
        loadedimages++
        if (loadedimages == arr.length) {
            postaction(newimages) //call postaction and pass in newimages array as parameter
        }
    }

    for (var i=0; i<arr.length; i++) {
        newimages[i] = new Image()
        newimages[i].src = arr[i]
        newimages[i].onload = function() {
            imageloadpost()
        }

        newimages[i].onerror = function() {
             imageloadpost()
        }
    }

    return { //return blank object with done() method
        done:function(f) {
            postaction = f || postaction //remember user defined callback functions to be called when images load
        }
    }
}

preloadimages('img01','img02','img03')
    .done(function(images) {
        alert(images.length + " images loaded"); 
    });

This, however, loads only 1 image.

I tried some other codes as well, with no results. Should image preloaders actually work on css background images? Or are they meant only for tags?

Upvotes: 2

Views: 1920

Answers (2)

DavidTonarini
DavidTonarini

Reputation: 951

I got it to work! This is a pretty simple jquery solution:

$(".hidden-element").show(); $(".hidden-element").hide();

This is not detected by the user, and still seems to force the browser to load the images I'm still unable to use callbacks after loading is done, but this work in ratice

Upvotes: 0

DMTintner
DMTintner

Reputation: 14729

There's a really nice pure CSS solution for preloading background images that I think could help you. The concept behind it is to place the background images on a pseudo-element that is loaded when the page loads but is not shown. This causes the browser to load the images so that when they are called later by another element they are ready to go. Here's some sample code:

.main-element {
    background-image: url(your_url_here);
}
.main-element:after {
    display: none;
    content: url(your_url_here), url(another_url_here), url(another_url_here), etc.
}
.hidden-element {
    display: none;
    background-image: url(your_url_here);
}
.main-element:hover {
    .hidden-element: display: block;
}

Here's a link to an article with more info about this technique: http://www.thecssninja.com/css/even-better-image-preloading-with-css2

Upvotes: 5

Related Questions