JQuery - Visual Image Preloading Effect

Posted on 2010-04-02
Medium Priority
Last Modified: 2013-11-11
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">
	$(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

Open in new window

Question by:CSS_Guy
1 Comment
LVL 82

Accepted Solution

hielo earned 2000 total points
ID: 29566874
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' ... />


Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question