I'm working on a project where I have to bind large amounts of data from server to a portion of HTML page on drop down change event. I want to show a spinner until the point HTML finishes rendering. How can I know when the HTML rendering is complete ?Is there any event that I can use . I know $(document).ready work for the whole HTML page.
Asked
Active
Viewed 145 times
-1
-
Are you loading this data with AJAX? If yes, then use a callback. – BernardoLima Sep 05 '14 at 20:46
-
if you are loading via ajax $.ajaxStart, $.ajaxComplete might help – Sunand Sep 05 '14 at 20:47
-
Data is coming fast from server but HTML binding is taking lot of time as it has 40 columns per row with close to 2000 rows. performance in IE is really bad. Its a partial page update not the whole page – Ravi Sep 05 '14 at 20:55
-
will you please show us a screenshot of your page? – Ranjit Singh Sep 05 '14 at 21:03
-
It has a dropdown at the top and a HTML table that gets loaded on change of dropdown in simple terms – Ravi Sep 05 '14 at 21:06
1 Answers
0
You have to test multiple Painting and Rendering instances of your browser and check which form of CSS manipulation will take up least of the time. What probably works fastest is something like a fixed placeholder with an animated GIF or SVG in it that is hidden or not (hidden or opacity). What's best to avoid is HTML collapsing and growing all the time in that loader-section. This will trigger the HTML engine's painter to constantly flush and redraw fully.
Finally you can maybe skin off some bytes of the AJAX request by doing research on the way jQuery and raw JavaScript handles the calls. The jQuery variant is very easy to use, but obviously adds some overhead. In your situation (with thousands of calls), overhead can mean a big deal.
It's mostly a case of doing your research on the functions and tools you use and finding out where you can the biggest gains in performance.
-
If I use a setTimeout event with 10ms before start of rendering will it work ? – Ravi Sep 05 '14 at 21:15
-
It's probably best to not use `setTimeout` or `setInterval`. They use the evil `eval` functionality and cause the whole scope of the JavaScript code you run to be re-analyzed. You might want to do research on that too. You could look totally different at this problem. Let a back-end script collect all the data in cycles and provide it in big JSON chunks each `X`-miliseconds. This way you can fine-grain the HTML/JS side better and have better control over the data flowing in. – Sep 05 '14 at 21:19
-