Copy code

Permalink

Please tell us why you want to mark the subject as inappropriate. (Maximum 200 characters)

Private Message

From : guest

To :

Subject :

Content :

Type the characters you see in the picture below.

From : guest

To :

Subject :

Content :

Type the characters you see in the picture below.

Feedback

Email ID

Subject :

Comments :

Private Message

Type the characters you see in the picture below.

Attach files

Desktop Google Docs

Each Attachment size should not exceed 1.0 MB. Max no of attachments : 3

Loading User Profile...

guest

Response title

This is preview!

Attachments

()

New to this Portal? Click here to Sign up

You can also use the below options to login

jQuery
Plugins
UI
Meetups
Forum
Blog
About
Donate

All Forums
Recent Posts
Log In

Search jQuery

jQuery Forum

Move this topic

Forum :

Sub forum :

Using jQuery

pantonebl..

jquery fadein for all images, not sure using best implementation of code

in Using jQuery • 10 years ago

Hello.

On a custom Wordpress theme I've written, I'm using fadein on all images. It seems to work, but I'm not sure I'm using the best code, and sometimes jitters on load. I'd appreciate if you could give it once over.

The production site is here

header

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

footer

<script type="text/javascript">
$('img').hide().fadeIn(1000);
</script>

many thanks for your time, really enjoying learning jquery

Replies(9)

jay.blanc..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

The code that you're using is pretty efficient. Why are using such an old version of jQuery?

Leave a comment on jay.blanchard's reply

pantonebl..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

I've just updated to 1.8.0 (wasn't staying on top that that, thanks for spotting!)

This code implemented on the production site, appears to let the img load, then quickly hide it, then fade in. So it odd onload?

Leave a comment on pantoneblack's reply

jay.blanc..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

The code initiates a hide() first, then the fade in. The code is called when the DOM loads.

Leave a comment on jay.blanchard's reply

pantonebl..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

yes. do can it be changed to keep all img hidden until load complete?

Leave a comment on pantoneblack's reply

jay.blanc..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

You have to set the CSS for the image to display: none. Then take the hide() function out of your jQuery code.

Leave a comment on jay.blanchard's reply

pantonebl..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

Many thanks Jay. That did it.

Would this cause issues for browers not allowing js?

Leave a comment on pantoneblack's reply

jay.blanc..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

Yes - hidden images will never show if the browser doesn't allow JavaScript.

Leave a comment on jay.blanchard's reply

pantonebl..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

would anyway know a way to have an fallback?

Leave a comment on pantoneblack's reply

creativec..

Re: jquery fadein for all images, not sure using best implementation of code

10 years ago

All graphical browsers still support that <noscript> tag.

Follow this sketch:

<head>
…
<style> img { display: none } </style>
<noscript>
<style> img { display: inherit } </style>
</noscript>
<script>
$(function(){
$('img').fadeIn();
}
</script>

Have fun!
- creativecouple

Leave a comment on creativecouple's reply

Change topic type

Topic Type :

No of days :

Link this topic

Provide the permalink of a topic that is related to this topic

Permalink

Reply to pantoneblack's question

Top Reply

{"z21366261":[14737000003567150,14737000003567215,14737000003567237,14737000003567275,14737000003567281],"z19756426":[14737000003569096],"z5263876":[14737000003567201,14737000003567229,14737000003567271,14737000003567279]}

Statistics

9 Replies
2675 Views
1 Followers

Actions

Permalink

Response title

Attachments

Replies(9)

Statistics

Tags

Actions