Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browser busy indicator when loading data

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.

like image 340
Kamyar Avatar asked Mar 27 '12 03:03

Kamyar


2 Answers

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.

like image 137
Alireza Mirian Avatar answered Nov 15 '22 14:11

Alireza Mirian


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.

like image 33
Epuri Avatar answered Nov 15 '22 16:11

Epuri