JQuery Visual Image Preloader WordPress

Buzu B comments:

another fix would be to use

img{
display: none;
}

in your CSS. This is guarantee to hide all the images before they even load.

WP Answers comments:

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?

WP Answers comments:

Let me try the CSS as well..

WP Answers comments:

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 ) ?

Buzu B comments:

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.

WP Answers comments:

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 ;)

Buzu B comments:

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.

Buzu B comments:

by navigator I meant browser....

WP Answers comments:

Hi,

The link posted in my question is not my site, it was just an example site. I will PM you the link.

Buzu B comments:

Ok I see it now. Let me see under the hood...

Buzu B comments:

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" />

WP Answers comments:

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)

Buzu B comments:

Yeah it is possible. Instead of using

$(img)

you use

$(".hiddenImg");

That will get all your images with a hiddenImg class

Buzu B comments:

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.

WP Answers comments:

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.