[stewbydoo]

I'm sure this is very simple for some of you so that is why I am asking because I just don't understand why my code is not working. Believe me I only ask a question on these forums as a very last resort. This is so simple and I do not understand why it's not working and it is really bothering me.

All I want to do is hide the image until it finishes uploading and then have jQuery fade in the image. Simple right? Not for me with how this day is going.

//javascript
$("img").load(function(){
	$("img").fadeIn(5000);
});

//php image echo
echo "<img src='uploads/resized_$fileName' alt='Image' visibility='hidden'/>";

Keep in mind I have tried $("img").fadeIn("slow") as well. Why does this not work?

[stewbydoo]

Figured out the visibility thing. Now i just can't get it to show up after it loads using jQuery.

[Atli]

The problem with the Javascript is that it's being executed before the image exists. You need to either put the Javascript after the image in the DOM, or better yet, execute the Javascript once the DOM is ready.

With jQuery, you can simply use the .ready handler for that. There you can then fetch the image, hide it, and then fade it back in. - You are better of hiding the image with jQuery than using CSS. Especially if you are planing to put the CSS into the HTML.

Something like this might work:

$(function() {
	$("img")
		.hide()
		.load(function() {
			$(this).fadeIn(5000);
		});
});

By the way, note how I use $(this) inside the img load callback. By doing this I am only fading in the image that triggered that specific event. In the case where multiple images are being loaded like this, using $("img").fadeIn() would fade the all in, even those that have not loaded yet.

[stewbydoo]

That makes a lot of sense. It's working pretty well now. Thanks so much! You saved a computer today.