1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Rep Power

    Going from one page to another smoothly, not bit by bit??

    I am trying to make going from page to page look more clean on a website.

    I have noticed that a few elements disappear immediately when I press a link to go to another page, then slowly it goes to the page and elements slowly appear one by one.

    I decided to implement a javascript preloader and I would like to improve what I am getting.
    - at page A, trying to go to page B
    - click link to page B
    - page A: high z-index elements like navigation bar and menu disappear instantly, bits of page A elements still there. Doesnt look good with bits of elements there!
    - a few seconds later, window goes white, browser address changes to page B. Preloader covers whole screen
    - page B elements loading in background of preloader
    - then preloader disappears and page B is displayed complete.

    What I do not like is how bits of elements disappear, then pauses for a few seconds while the browser goes to the address, after the pause it goes to white and then the preloader fills the page.

    Is it possible for when the user clicks link B, the A page looks the same as though nothing is happening. Then all of a sudden, page B appears!

    If thats not possible, is there a way that when bits of elements disappear immediately when link B is clicked, that a massive div covers the whole page with white so that the transition from page A to B looks more smooth??

    I am thinking, I need to know what the steps are when a link is clicked and the browser goes to the next page, so I can know where to place a script so that a cover can be placed between the time link B is clicked and to the time page B is being loaded??

    Any other suggestions would be great to make the transition from page to page look slick : )
  2. #2
  3. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Rep Power
    Regarding the use of JavaScript, you could look at the AJAX method.
    If you for example have a template page with header, footer, menu and content area, then you can use AJAX to only update the actual content area.
    But it does have some drawback to take care of like the using of direct linking.

    But i think you should also find out which element that makes it running "bit by bit".
    Do the page have a lot of images? or is it mostly a text page?
    From my experience, the times sink is when there are many (and/or large) images to download.

IMN logo majestic logo threadwatch logo seochat tools logo