How can I display most of an html page quickly, then load the slow things last?
ajax, javascript, jquery, jsp, taglib
Solution
You don't need JavaScript for this. Just place the last div before the slow one, and use CSS to arrange the divs on the screen as it suits you:
<html><body>
<div id="firstDisplayStuff">...</div>
<div id="endingDisplayStuff">...</div>
<% out.flush(); %>
<div id="slowStuff" style="display: none;">
<mytaglib:abc name='SlowBoat'>...</mytaglib>
</div>
</body></html>
You can use a couple lines of code, called from body onload to get the slow div to where it belongs and then to show it. `$('#slowStuff').insertAfter('#someDiv')` to get it located in the right place, and `$('#slowStuff').show();` to get it to show.
Problem
I've got a JSP page like this: ``` <html><body> <div id="mainContainer"> <div id="firstDisplayStuff">...</div> <% out.flush(); %> <div id="slowStuff"> <mytaglib:abc name='SlowBoat'>...</mytaglib> </div> </div> <div id="floatRightContainer> <div id="endingDisplayStuff">...</div> <div> </body></html> ``` When it hits the taglib, it takes forever, and that delay can not be avoided. So using the `out.flush();` I can at least display the `firstDisplayStuff`, but then the user just sits there looking at half a page while the taglib stuff runs. Only after that's done does the user see `endingDisplayStuff`. I want `firstDisplayStuff` and `endingDisplayStuff` to both display right away. But I figured that using jQuery, there would be a way to leave `<div id="slowStuff">` blank, and then load it later. What would the jQuery code look like to load `<div id="slowStuff">` after both display stuff divs were showing? Where would I put the code? How would it be invoked? EDIT : Added `<div id=mainContainer>` and `<div id=floatRightContainer>` into the existing example.