6

I'm trying to achieve what has been explained here.

I am trying to load some data from server to the client side using dynamic script tags. (i.e I create a script tag, set its src to my JSON controller and append it to my head or body tag).

the script loads correctly with the data returned from server. But during the script load, the browser doesn't display busy indicator (tried with Chrome/Firefox) (while according to this reference (page 35), this should be the default behavior).

Also I have added Sleep method to my server side method to simulate a long-running process, to see the busy indicator appears. But still no luck.

P.s. When I use IFrame instead of script, everything works fine and the busy indicator is displayed by browser. but couln't do it with script tag.

Community
  • 1
  • 1
Kamyar
  • 18,639
  • 9
  • 97
  • 171
  • Is using something like the Block UI plugin an option? Works fairly well, if you're already invested in jQuery (not so much, otherwise). – Tieson T. Mar 27 '12 at 03:13
  • Block UI just changes the cursor icon. what I really want is to see the spinning indicator on the tab.I'm confused how facebook does it. does it use IFrames as well? – Kamyar Mar 27 '12 at 04:07

2 Answers2

2

In short:

facebook DO make use of iframes when loading page data, and there is nothing magical about browser loading indicator.

More details:

when you navigate from one page to another, FB injects a hidden Iframe into DOM and its src attribute will be set to the page you've asked (with a couple of parameters indicating this is an ajax-like request and not a full page refresh). So the page actually gets loaded in the hidden iframe. However the content is not HTML, and instead it's a bunch of javascript tags which consume some JSON objects containing HTML and other data that is required to render the page.
Below is from my firebug console during loading a page when the iframe is injected to DOM. you can check that after page finishes loading, the iframe is removed.

facebook hidden iframe

To get a sense of how these scripts work to load the page data, you can read about the BigPipe Technique. In a nutshell, it broke down construction of each page into a couple of so called pagelets, which have their own set of CSS and JS resources, so the resources of each pagelet can be fetch from server parallel to other pagelets. big_pipe will manage to put every pagelet into it's container after all its resources become available.

Alireza Mirian
  • 5,862
  • 3
  • 29
  • 48
  • Their approach doesn't work on all browsers. Safari, notably, and the later IEs don't respond to iframe loads at all in terms of browser UI. – Dtipson Nov 29 '14 at 02:30
1

Loading components asynchronously on web page won't trigger browser's buys icon in non-IE browsers. Even its the same for facebook too. Try liking some post or write something on wall, both these actions won't show browser's buys icon in non-IE browsers.

Epuri
  • 280
  • 2
  • 5
  • 1
    Navigate to `http://developers.facebook.com/docs/reference/plugins/comments/` in the demo section, click `View NUMBER_OF_COMMENTS more` where `NUMBER_OF_COMMENTS` is well, the number of comments. See the browser indicator. it DOES change to busy without refreshing the whole page. I'm suspecting they're using iframes. – Kamyar Mar 27 '12 at 04:26
  • It shows busy icon for loading of profile images but not for the entire data resulted through AJAX – Epuri Mar 27 '12 at 05:40
  • 1
    @Epuri when you are navigating between pages in Facebook, a complete page reload doesn't happen. Previous page content will be removed and new content will be fetched, and browser loading indicator causes everyone to think it's a full page reload, however it's not. You can check it by modifying something in header (using browser developer tools), and then navigating to another page. The changes will remain. – Alireza Mirian Nov 01 '14 at 20:16