CODEWITHSUNDEEP
javascriptjquery
luqo33
luqo33

Reputation: 8361

Fade-in pictures on page load with jQuery

I'm currently using this jQuery snippet to produce the effect of picture fading-in one-by-one when the page is loading:

jQuery(document).ready(function($) { 

    animatePictures('img');  

});

function animatePictures(selection) {
    elementsToAnimate = jQuery(selection);
    elementsToAnimate.hide().each(function(i) {
    jQuery(this).delay(i * 500).fadeIn(5000);
    });
}

This roughly does the trick, but as you can see, the assets are first loaded, then they are hidden when the DOM is ready and then faded-in in 500ms intervals.

I was wondering if you could tell me how I can make it properly so that pictures really fade-in as the site is loading, and are not first hidden and then faded-in.

I will appreciate all suggestions. Thanks!

Upvotes: 2

Views: 1250

Answers (2)

Traveling_Monk
Traveling_Monk

Reputation: 788

First in your css set all your pics to be display:none

img{display: none;}

Then use:

function animatePictures() {
   jQuery('img').each(function(i) {
      jQuery(this).delay(i * 500).fadeIn(5000);
    });
}
jQuery(window).load(function($) { animatePictures(); });

by using the window load all your pictures will be loaded in memory and can be shown separately than the rate of download... You might think of using a lazy loader script instead if you are trying to optimize your page...

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Pretty simple solution is to use just css:

img{/*select the selector*/
  display: none;
}

Upvotes: 1

Related Questions