$20
JQuery Visual Image Preloader

Hi,

I have some JQuery functionality in a custom portfolio page of my wordpress theme that I need some help with.

Essentially what the code does is hides all the images<img> on the page, loads them behind the scenes, and then fades them in one by one. I have the images placed in a 'frame' that has an animated gif set as the background image via CSS, so there's a loading animation while the main 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, and then disappear, and 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.

You can take a look at the JQuery code here:
http://www.pastie.org/private/0wmuhlwkmx5ee5k9yagq

This isn't my site, but you can see the very similar the pre-loading effect in action:
http://themes.mysitemyway.com/infocus/gallery/

Thank you very much for your help.

WP Answers | 04/03/10 at 1:26am | Edit

Preloading, image, jquery, wordpress

(1) Possible Answers Submitted...

Last edited:
04/03/10
2:34am
Buzu B says:
Change this part:
```
$(function () {

	$('img').hide();//hide all the images on the page

});
```
to:
```
$(document).ready(function () {

	$('img').hide();//hide all the images on the page

});
```
Previous versions of this answer: 04/03/10 at 1:31am | 04/03/10 at 1:33am
- 04/03/10 1:34am
  
  Buzu B says:
  another fix would be to use
```
img{

     display: none;

}
```
  in your CSS. This is guarantee to hide all the images before they even load.
- 04/03/10 1:35am
  
  WP Answers says:
  Thank you for this, but the images are still visible for 1 second when the page loads, instead of being hidden right away.
  
  Does it make a different if the code is in an external JS file or in the head of the page?
- 04/03/10 1:36am
  
  WP Answers says:
  Let me try the CSS as well..
- 04/03/10 1:43am
  
  WP Answers says:
  Awesome. The Jquery mod along with the CSS fixed the issue. Thank you.
  
  However, there seems to be a slight bug. For some reason the images are loading in 7px higher than they should be. Is there anyway to add a margin via jQuery after they've loaded? (margin-top: 7px; or margin-bottom: -7px ) ?
- 04/03/10 1:48am
  
  Buzu B says:
  you can define a class that fixes the 7px issue.
  
  .fix{
  margin-top: 7px;
  }
  
  and then use jQuery to add that class to the image.
  
  .addClass( 'fix' );
  
  or add the class directly to your images.
- 04/03/10 1:53am
  
  WP Answers says:
  Hi,
  
  Adding the fix directly to the CSS didn't work. Maybe the class via JQuery will work? Where in the code would that go? (sorry im a noob ;)
- 04/03/10 1:57am
  
  Buzu B says:
  did you change the site you linked in your question? because I'm reloading and reloading and don't see what you refer to as the bug. What navigator are you using. It might be a navigator issue in which case the approach to fixing it is different.
- 04/03/10 1:58am
  
  Buzu B says:
  by navigator I meant browser....
- 04/03/10 1:59am
  
  WP Answers says:
  Hi,
  
  The link posted in my question is not my site, it was just an example site. I will PM you the link.
- 04/03/10 2:02am
  
  Buzu B says:
  Ok I see it now. Let me see under the hood...
- 04/03/10 2:14am
  
  Buzu B says:
  It looks like the problem comes when the image changes from display:none to display:block.
  
  Try changing the css I suggested earlier for this:
```
img{

display:block;

visibility:hidden;

}
```
  Now, I would suggest that instead of img, you use a class name like hiddenImg and add that to the images that are to be hidden. This is because otherwise the CSS will hide all the images, and you might don't want that to happen. If you choose to use a class name, the CSS would look like this:
```
.hiddenImg{

display:block;

visibility:hidden;

}
```
  and you would need to add the hidden class to your images:
  
  <img src="the/path.jpg" class="hiddenImg" />
- 04/03/10 2:28am
  
  WP Answers says:
  hmm...
  
  I added that CSS but now the images don't show up at all.
  
  I'm ok with the 7px bug for now. I think I can come up with a work around of some sort.
  
  I do like the idea of using a class instead of hiding every image though. Would it be possible to modify the original JQuery so that it executes all of that functionality only to images with a specific class? (the class of .hiddenImg is fine)
- 04/03/10 2:32am
  
  Buzu B says:
  Yeah it is possible. Instead of using
  
  $(img)
  
  you use
  
  $(".hiddenImg");
  
  That will get all your images with a hiddenImg class
- 04/03/10 2:43am
  
  Buzu B says:
  I just discovered a bug in your code. It is not causing any of the problems, but It would make it easier to fix the 7px problem.
  
  The bug is that you code is not actually canceling the interval.
  
  this line:
  
  var int = setInterval("doThis(i)",500);
  
  should be
  
  int = setInterval("doThis(i)",500);
  
  without the var statement, otherwise it is being declare as privet to the function in which it is declared. You want to make it global so that when you do this:
  
  clearInterval(int);
  
  you can access it.
  You might ass well add a delete statement so you don't leave global variables in the window object.
  
  clearInterval(int);
  delete int;
  
  Also, this:
  
  var int=0;//Internet Explorer Fix
  
  seems to have no reason to be there. What is it exactly you are trying to fix with it? That maybe was the declaration of int that is used to reference the interval. You can just leave it like that, in fact, i recommend you do. Just delete the var statemente inside the function, the one I told you in the beginning of this reply.
- 04/03/10 3:02am
  
  WP Answers says:
  Hi,
  
  I'm not certain what the IE fix is in the code. (I followed a tutorial to build this).
  
  I made your recommended changes and everything is still working fine. Thank you very much for the code upgrades.