Fake loading/progress bar for slow non-Ajax page

Question

Hi,

I'm developing a site which serves some slow (up to around 4 sec. loading time) pages due to extensive database queries.

In order to let the users know that the new page is loading (also to prevent multiple clicks), I'm displaying a div with a fake loading bar on the page where the users clicked a link to a slow loading page.

Actually, showing the fake loading div is working very good. The DOM of the old page (with the fake loading bar) is still displayed when the new page is loading, which means the loading div is shown until the new page is ready to be displayed.

This is how it's done. HTML part:

<!-- link example which will execute the javascript -->
<a href="link/to/slow/page/" class="loading">slow page</a>

<!-- full screen div which gets displayed when clicking a
     "loading" class link. -->
<div id="dim" style="display:none; top:0; left:0; width:100%; height:100%; z-index:9999;">
    <div id="loading">
        <p>loading data, please wait...</p>
        <img src="loading.gif" alt="loading..." />
    </div>
</div>

Javascript (jQuery) part:

$(".loading").each(function() {
    $(this).click(function() {
        $("#dim").fadeIn();
    });
    return true;
});

The Problem now is, that if a user clicks back in the browser (just tested with FF 3.6) from a slow page, the loading bar div is still shown sometimes.

Questions:

1. Is this even a good way to design such a fake loading bar?
2. If yes, is there a way to prevent the browsers from displaying the div when going back in the browser's history?

Thanks for any hints.

Conclusion:

looks like there's no easy way to fake it that way. I'm going for Ajax data retrieval with a real loading bar.

Answer 1

If your query was optimized not to run that long you wouldn't need a fake progress bar.

However, you're dealing with browser cache here, so there's nothing you can do to force the browser to show or not show anything unless a page request is done when they do hit the back-button.

A really hacky way of doing things is to check, ondocumentready, if the #dim fadein is visible and to make it invisible.

That way when the click happens, it starts displaying, and if they hit the back button the browser renders the page, checks if it's visible "onready" and just make sure it's invisible unless a button/link is clicked

Answer 2

Is there lots of data to display, hence the slow data retrieval? If so how about reducing the data set you initially load and request subsequent data chunks with ajax requests?