Results 1 to 7 of 7

Thread: Frog.js - Getting a flash of the thumbs as page loads

  1. #1
    Join Date
    Mar 2007
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Frog.js - Getting a flash of the thumbs as page loads

    1) Script Title: Frog.js - http://www.dynamicdrive.com/dynamici...ogjs/index.htm

    2) Script URL (on DD): http://www.vikibarefoot.com/Chris/FR...t_Protest.html

    3) Describe problem: I am getting a flash of the thumbs as the page loads. Looks terrible. What to do?

    Thank you ..... viki

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The script is supposed to do that, or at least that's how it works in many browsers. You can stop it from doing that by adding this in the head of your page:

    Code:
    <script type="text/javascript">
    document.write('<style type="text/css">#FrogJS a img {display:none;}<\/style>');
    </script>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    vkbarefoot (02-24-2008)

  4. #3
    Join Date
    Mar 2007
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you .... I'll try it .... v

  5. #4
    Join Date
    Mar 2007
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    That was the ticket ... thank you

  6. #5
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much for this solution...the thumbnails were driving me crazy!

  7. #6
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This results in code that doesn't validate as both Transitional or Strict XHTML.

    Is this something I can do from an external style sheet? Or from within Frog.js itself? IE, as you know, is super picky when it comes to clean code.

    EDIT: But it does stop the FOUC! Thank you for posting this fix. It should have been included in the script by default. It's an unavoidable occurrence, even if the images are very small in file size.

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Nachturnal View Post
    This results in code that doesn't validate as both Transitional or Strict XHTML.

    Is this something I can do from an external style sheet? Or from within Frog.js itself? IE, as you know, is super picky when it comes to clean code.

    EDIT: But it does stop the FOUC! Thank you for posting this fix. It should have been included in the script by default. It's an unavoidable occurrence, even if the images are very small in file size.
    Yes, you can put the actual code:

    Code:
    document.write('<style type="text/css">#FrogJS a img {display:none;}<\/style>');
    At the top of the frog.js file.

    By way of explanation:

    • XHTML should not be used for a number of reasons, unless you are serving it as application/xml. And if you do, IE will not render it.
    • If you are stuck with XHTML for whatever reason, there is nothing intrinsically invalid about the code, just having an on page script is all it takes to set off the validator for XHTML DOCTYPEs.
    • If you are accustomed to using on page scripts with XHTML, you know how to comment them to make them valid. But in some cases this will not work. In any case, the preferred method is to make the code/script external.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •