CODEWITHSUNDEEP
javascriptjqueryimage-preloaderimage-loadingimage-load
calebo
calebo

Reputation: 3432

Fade in image only after finish loading

I've some images on a page which are loaded randomly and they are over 100kbs, is it possible to have it fully loaded then fade it in rather than progressively loading it?

My JS looks like this...

(function($){   
$.randomImage = {
    defaults: {         
        //you can change these defaults to your own preferences.
        path: '_images/', //change this to the path of your images
        myImages: ['hero_eagle.jpg', 'hero_giraffe.jpg', 'hero_owl.jpg', 'hero_rabbit.jpg']
    }           
}   
$.fn.extend({
        randomImage:function(config) {              
            var config = $.extend({}, $.randomImage.defaults, config);              
             return this.each(function() {                      
                    var imageNames = config.myImages;                       
                    //get size of array, randomize a number from this
                    // use this number as the array index
                    var imageNamesSize = imageNames.length;
                    var lotteryNumber = Math.floor(Math.random()*imageNamesSize);
                    var winnerImage = imageNames[lotteryNumber];
                    var fullPath = config.path + winnerImage;                       

                    //put this image into DOM at class of randomImage
                    // alt tag will be image filename.
                    $(this).attr( { src: fullPath });                                   
            }); 
        }           
}); 

})(jQuery);

Upvotes: 1

Views: 3123

Answers (3)

JensT
JensT

Reputation: 729

if you want all images to preload before fading in, and display a loading message to the user, you can use something like this:

                var gotime = imgArray.length;
                $(".maxCount").text(gotime);

                var imgCounter = 0;
                $.each(imgArray, function(){
                    $(new Image()).load(function(){
                        imgCounter++;
                        $(".presentCount").text(imgCounter);

                        if (--gotime < 1) {
                            $("#content").fadeIn();
                        }
                    }).attr('src', this);
                });

Upvotes: 0

danwellman
danwellman

Reputation: 9253

Should be able to, just set the image to display:none in your stylesheet and modify the bit of the script that sets the src to this:

$(this).attr( { src: fullPath }).load(function() {
  $(this).fadeIn()
});

Upvotes: 3

Alec Sanger
Alec Sanger

Reputation: 4562

Start with the images hidden using CSS. Then use:

 $(document).ready(function() {
   // Code goes here.
 });

and have the fade-in execute there.

There's another SO question that discusses preloading images using jQuery right here: Preloading images with jQuery

Quoting from the top answer:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Upvotes: 2

Related Questions