SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

    JavaScript timing when first loading a page

    I am experimenting with a page that loads 5 years of thumbs of past monthly newsletters in groups of 12. Takes a couple of seconds to load the page from scratch.

    After the page loads, JavaScript kicks in and hides all but the latest year. There is a JavaScript menu to navigate to the other years.

    During that initial loading period, part of the second year is usually visible in the lower part of the screen then disappears when the page is fully loaded. This "show then hide" effect looks tacky to me.

    Is it possible to delay or otherwise alter the rendering of the page so this "show then hide" effect does not occur? ie. is there a better way to implement the JavaScript?

    http://www.rogue-eagles.org/Newsletters/NewsCat3i.htm

    http://www.rogue-eagles.org/Newsletters/js/newscat-c.js

    This is my first foray into JavaScript. Please feel free to slice and dice wherever it might help.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The way I would do it would be to set up a separate page for each year's newsletters with links between them so that it works for those without JavaScript.

    I'd then set up the script at the bottom of the page to request the additional information from the server for the additional pages and have it insert that into hidden divs so that those people with JavaScript enabled can get the effect you are after provided that there has been enough time for the JavaScript to have loaded the additional info.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,469
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    felgall, thank you for the reply.

    As it is, the page works satisfactorily for users who have JavaScript disabled. All of the years are visible and the user can scroll down to find what s/he wishes. The JavaScript menus are not needed.

    I tried setting up the thumbs on separate pages by year. Works nicely without JavaScript; however, maintaining menus on separate pages invites errors as all of the pages will have to be updated annually and the users are unable to visualize all years of their newsletters at once (desirable).

    Your second paragraph addresses programming techniques that I am unfamiliar with.

    I gather, therefore, that there is no way to alter the loading pattern of the current page.

    I'm game to consider a different plan, but radically new may be more than I can absorb today. If you can direct me to some examples or tutorials of the concepts involved, or provide some example code I would be grateful. My goal is to have this ready for the website by the first of next year, so there is time to learn a new trick or two <smile>.


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
  •