1

could any body explain what I should modify, how after hiding the image, still keep the div as a blank with no content but the same width and height as it were with image,

Exact example: http://jsfiddle.net/rJuWL/1/

So after hiding, Second! comes to First!, but I need to keep it as First! blank Second!

Html

<html>
<body>
    <div>First!</div>
<div class="loading">
<img id="loading" src="http://preloaders.net/preloaders/284/preview.gif" class="none"/>
    <div>Second!</div>
</div>
</body>

Css

.none{display:none}
.loading{width: 32px;height:32px;}

Javascript

showLoading();    
function showLoading() {
  $("#loading").hide();
  $("#loading").show().delay(2500).fadeOut('10');
}

2 Answers 2

7

Dont hide it with display:none, set visibility:hidden

display:none will take it out of the DOM flow. Changing the visibility to hidden will keep it there but emulate setting opacity to 0.

Here's a quick demo which keeps your fadeOut http://jsfiddle.net/AlienWebguy/5cwE7/

0
1

I would use opacity.

showLoading();    
function showLoading() {
  $("#loading").fadeTo(0,0);
  $("#loading").fadeTo(0,1).delay(2500).fadeTo(10,0);
}

The first 0 is the duration, the second is the opacity. 1 for show, 0 for hide.

However, your code doesn't really make sense. Why are you hiding it and then instantly showing it, then waiting 2 and a half seconds and hiding it?

I don't think the initial hide is needed (the first line of the showLoading() function in my code)

Edit:

Alternatively, you could use .css("opacity",0) in place of .fadeTo(0,0), it is more than likely more efficient.

2
  • It's just a sample of the code, that's why it make no sense. I'll explain for what it needed, I've a web page, it loads up, and how some function, which is using ajax, so while sending ajax queries to server, the page is showing loading image ( showloading() ) and hides it after some time , that's it! May 15, 2012 at 22:00
  • And, the initial hide, was used, if other ajax querie is started, so making sure the loading image would be hidden if it's already showing. Thank you so much. May 15, 2012 at 22:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.