Fade in image only after finish loading

Question

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);

i think so because element will be give event or something after that is ready, if you want to show loading you can place that after element what do you want to show is complete if that is image you can use IMAGE.complete — viyancs, Mar 15 '12 at 12:57

score 3 · Accepted Answer · answered Mar 15 '12 at 12:54

3

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

answered Mar 15 '12 at 12:54

danwellman

9,068
8
60
88

+1 Just perfect. But where is this special `load()` function documented? – flu Feb 15 '13 at 13:56
Thanks! Keep in mind that this is **depricated** as of jQuery 1.8 and use `$(this).attr({src: fullPath}).on('load', function() {$(this).fadeIn();});` instead. – flu Feb 18 '13 at 13:47

score 2 · Answer 2 · edited May 23 '17 at 12:08

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'
]);

score 0 · Answer 3 · answered Mar 15 '12 at 13:08

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);
                });

Fade in image only after finish loading

3 Answers3