Jquery image preloader (how do i get the loading.gif to appear faster)

Question

Hello

Im attempting to get a Jquery image preloader to start the "loading.gif" and image preloading areas to start immediately on page open (if that's even a proper term) and I have been experimenting with javascript placement and other things, but it always loads a bit too late for my tastes.

Here is the URL

http://eleven23.net/beta/work/web/lounge22-preload.php

There are a few variables im experimenting with to get it to load faster

Which one should I use?

$(window).bind("load", function() {

• or -

$(document).ready (function() {

Also Ive placed the inline javascript right before </body> hoping that would also speed the jquery start time.

Any suggestions?

Answer 1

$(document).ready() fires once the DOM is loaded and ready to be manipulated. Adding the loading image here, pre-loading the large image and then removing the loading image again won't really work as you want it to.

You need to add the loading image to your markup (so it's rended immediately), then pre-load the large image and when loaded hide/remove the loading image.

There's a good tutorial on pre-loading images using a simple plugin here.

Answer 2

I've used the old-timey image element to cache images. When they load, I know they are in the browser cache. If I want to make sure they are around, I hold onto them in an array that can't go out of scope.

var images = [];

// Preload a list of images with an optional callback as a final parameter.
function preload() {
    if ( arguments.length == 0 ) return;
    var waiting = arguments.length - 1,
        count = 0,
        callback = arguments[ arguments.length - 1 ];
    if ( typeof callback == "string" ) {
        callback = function() { };
        waiting++;
    }
    function loaded() {
        if ( ++count == waiting ) callback();
    }
    for ( var i = 0 ; i < waiting ; i++ ) {
        var image = new Image();
        image.onload = loaded;
        image.src = arguments[ i ];
        images.push( image );
    }
}

preload( "people.gif", "images/star.jpg", "/site/images/panorama.jpg", function() {
    doSomethingWithImages();
});

I'd be curious to hear of any major drawbacks to using the image element.

I can't find the original documentation for Image at the MDC, but here is some contemporary documentation on using the Image object.

https://developer.mozilla.org/en/Canvas_tutorial/Using_images

But, the object predates Canvas and HTML 5. It goes way back.

http://articles.techrepublic.com.com/5100-10878_11-5214317.html

Answer 3

Hey, you can check out a great jQuery Preloader that I wrote with full callbacks, auto reading of images to preload, and a lot of easing in animations. Check it out here: jQuery Preloader