How can I defer image load until tab is clicked using jquery?

cruiserDan
cruiserDan used Ask the Experts™
on
I've searched and can't find a solution for this. Pages we're building use 5 or 6 tabs that are each heavy with text and images. With the goal of fast web performance we want to limit image requests for hidden tabs until a user actually selects them. The ajax method of referring to a separate url is not preferred as the text should be contained within the page source for SEO purposes. Is there a method which defers the image requests? We're using jquery 1.4.2 and jquery UI 1.85. thanks

 
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
you can go with either of the three approaches
1) use css sprites
http://www.w3schools.com/css/css_image_sprites.asp
2) do not mention the src attribute value in img tag until that tab is clicked.

3) Do not load the html untill that tab is clicked, so when you click that tab, the html will be loaded for that tab using load() api of jquery

Author

Commented:
Thanks, the 2nd option seems best as there's too many large images for sprites to handle. Cheers

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial