JQuery - Visual Image Preloading Effect

Hi Experts,

I followed a tutorial online for creating a visual image pre-loader. Essentially what it does is hides all the images on the page, loads them, and then fades them in one by one. I have the images placed in a 'frame' that have an animated gif as the background image, so there's a loading animation while the image is loading. Its a pretty slick effect, but its not working 100% correctly. Everything is working as intended, but sometimes the images will stay visible for 2-3 seconds, then disappear, then load and fade in. I need the images to get hidden right away so it actually looks like they are loading. I tried moving my code higher up in the source code thinking that would help, but it didn't.

I really appreciate any help on this one. I'm about 98% done with this site and then I can deliver to the client.

Thank you much.
<script type="text/javascript">
//<![CDATA[
	$(function () {
		$('img').hide();//hide all the images on the page
	});

	var i = 0;//initialize
	var int=0;//Internet Explorer Fix
	$(window).bind("load", function() {//The load event will only fire if the entire page or document is fully loaded
		var int = setInterval("doThis(i)",500);//500 is the fade in speed in milliseconds
	});

	function doThis() {
		var images = $('img').length;//count the number of images on the page
		if (i >= images) {// Loop the images
			clearInterval(int);//When it reaches the last image the loop ends
		}
		$('img:hidden').eq(0).fadeIn(500);//fades in the hidden images one by one
		i++;//add 1 to the count
	}
//]]>
</script>

Open in new window

CSS_GuyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:
INSTEAD of this:
        $(function () {
                $('img').hide();//hide all the images on the page
        });


have you tried hiding your images via css on your markup rather than waiting to hide() (via jQuery) upon document.ready?
<img style='display:none' ... />

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.