3 Replies - 678 Views - Last Post: 19 July 2012 - 08:11 AM

#1 stewbydoo  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 34
  • Joined: 21-December 11

Hide Image on upload until Javascript decides to show it

Posted 19 July 2012 - 07:31 AM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: Hide Image on upload until Javascript decides to show it

#2 stewbydoo  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 34
  • Joined: 21-December 11

Re: Hide Image on upload until Javascript decides to show it

Posted 19 July 2012 - 07:39 AM

Figured out the visibility thing. Now i just can't get it to show up after it loads using jQuery.
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,991
  • Joined: 08-June 10

Re: Hide Image on upload until Javascript decides to show it

Posted 19 July 2012 - 07:51 AM

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.
Was This Post Helpful? 0
  • +
  • -

#4 stewbydoo  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 34
  • Joined: 21-December 11

Re: Hide Image on upload until Javascript decides to show it

Posted 19 July 2012 - 08:11 AM

That makes a lot of sense. It's working pretty well now. Thanks so much! You saved a computer today.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1