paint {

How to jQuery show img 5 secs after page load? Using some code I found at stackoverflow I'm trying to use the following but its not working. What am I missing? Thanks!

Hey there EricWatson,

Your element has an opacity of 0, but it's display property isn't set, which is what the .show() method changes by default, when a time is passed in it affects the width/height/opacity/display properties.

If you'd want to show something 5 seconds after page load try doing something like this:

Thank you so much. You wouldn't happen to know how it should look would you if I wanted jquery to hide the image first then show it 5 seconds after page load? That way I can get rid of the CSS display none and degrade well. Thanks!

And will jquery hide before the image loads? So no flash of unstyled content.

AussieJohn
—
2012-11-01T23:27:50Z —
#4

EricWatson said:

Thank you so much. You wouldn't happen to know how it should look would you if I wanted jquery to hide the image first then show it 5 seconds after page load? That way I can get rid of the CSS display none and degrade well. Thanks!

The way I often take care of that is by placing a class on the <html> element called "no-js", then in the <head> you can add some JS that adds a "js" class. This way you can target JS dependant things in your CSS.

In this case, it doesn't matter too much which you use, as you already found out, there are multiple ways to accomplish this.

The main difference between setTimeout() and .delay() is that setTimeout is a build in JavaScript function and .delay() is a jQuery method that delays a queue.

Reading the jQuery.delay() documentation might help clear it up a little too. As a general rule, you should probably only use .delay() with jQuery animations and other queue-able things.

setTimeout is JavaScript's built in method to execute a piece of code after a specific time, which offers more versatility and importantly, you can cancel a setTimeout (which you can not do with jQuery.delay()).

PicnicTutorials
—
2012-11-02T01:50:46Z —
#7

So your saying you prefer the settimeout here?

AussieJohn
—
2012-11-02T02:17:10Z —
#8

EricWatson said:

So your saying you prefer the settimeout here?

I'd probably prefer the setTimeout in this use case as it clearly indicates what the code is going to do. So when someone else reads this code is it very clear that it says "execute this code here after a delay of xxx milliseconds".

PicnicTutorials
—
2012-11-02T10:18:08Z —
#9

Thank you very much for the assistance. I went with the adding a class to the html for display none. I found the all in one way showed the image for a split second first. Not good. And I use this html methos. Unless I'm misssing something its the same but without the premeditated added the class js-off in the html.