jquery - Fake loading/progress bar for slow non-Ajax page -

-

i'm developing site serves slow (up around 4 sec. loading time) pages due extensive database queries.

in order let users know new page loading (also prevent multiple clicks), i'm displaying div fake loading bar on page users clicked link slow loading page.

actually, showing fake loading div working good. dom of old page (with fake loading bar) still displayed when new page loading, means loading div shown until new page ready displayed.

this how it's done. html part:

<!-- link example execute javascript --> <a href="link/to/slow/page/" class="loading">slow page</a>  <!-- full screen div gets displayed when clicking      "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 is, if user clicks in browser (just tested ff 3.6) slow page, loading bar div still shown sometimes.

questions:

  1. is way design such fake loading bar?
  2. if yes, there way prevent browsers displaying div when going in browser's history?

thanks hints.

conclusion:

looks there's no easy way fake way. i'm going ajax data retrieval real loading bar.

if query optimized not run long wouldn't need fake progress bar.

however, you're dealing browser cache here, there's nothing can force browser show or not show unless page request done when hit back-button.

a hacky way of doing things check, ondocumentready, if #dim fadein visible , make invisible.

that way when click happens, starts displaying, , if hit button browser renders page, checks if it's visible "onready" , make sure it's invisible unless button/link clicked


Comments

Post a Comment

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

-
right now, have tool tip pops when hover on edit box. problem tool tip contains multiple error messages , in 1 long line. need have each error message on own line. error messages contained in cstring new line seperating them. my existing code below. bool ontooltiptext(uint, nmhdr* pnmhdr, lresult* presult) { assert(pnmhdr->code == ttn_needtexta || pnmhdr->code == ttn_needtextw); // need handle both ansi , unicode versions of message tooltiptexta* pttta = (tooltiptexta*)pnmhdr; tooltiptextw* ptttw = (tooltiptextw*)pnmhdr; // tchar szfulltext[256]; cstring strtiptext=_t(""); uint nid = pnmhdr->idfrom; if (pnmhdr->code == ttn_needtexta && (pttta->uflags & ttf_idishwnd) || pnmhdr->code == ttn_needtextw && (ptttw->uflags & ttf_idishwnd)) { // idfrom hwnd of tool nid = ::getdlgctrlid((hwnd)nid); } //m_errprojaccel[ch] contains 1 or more error messages each...
Read more

asp.net - In javascript how to find the height and width -

-
i having .aspx , masterpage page. in masterpage loading aspx page . in aspx page design using generating table structure using code-behind server in javascript how find height , width . regards, kumar if you're looking table height , width, should it var tbl = document.getelementbyid('tbldemo'); alert(tbl.offsetwidth + '\n' + tbl.offsetheight);
Read more

c# - DataTable to EnumerableRowCollection -

-
i have datatable according client requirement can contain invalid date "00/00/1999",null,empty string.(typed datset) when collect them enumerables wish convert of invalid forms empty string. (i.e) enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || (how check date invalid date) ? string.empty : order.field<datetime>("orderdate") } how check whether date valid date or not? datetime.tryparse...like given current code: datetime date; enumerablerowcollection<datarow> query = order in _table.asenumerable() select new { orderdate= string.isnullorempty(convert.tostring(order.field<datetime>("orderdate")) || !datetime.tryparse(convert.tostring(order.field<datetime...
Read more