All geek questions in one place

How to quickly display most of an html page and then load slow things last?

I have a JSP page:

<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 this delay cannot be avoided.

Thus, using out.flush(); , I can at least display firstDisplayStuff , but then the user just sits there, looking at half the page while the taglib tag is running. Only after that the user sees endingDisplayStuff .

I want firstDisplayStuff and endingDisplayStuff be displayed right away.

But I thought that with jQuery you could leave the blank space <div id="slowStuff"> and then load it later.

What will jQuery code look like for loading <div id="slowStuff"> after the display display divs are displayed? Where would I put the code? How will it be called?

EDIT: Added <div id=mainContainer> and <div id=floatRightContainer> to an existing example.

+4
source share
2 answers

You do not need JavaScript for this. Just put the last div before the slow one and use CSS to position the div 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 the onload body to get a slow div to where it belongs, and then show it. $('#slowStuff').insertAfter('#someDiv') to find it in the right place, and $('#slowStuff').show(); to show it.

+5
source

Make your regular Ajax request to the DOM ready and populate the div with the displayed HTML:

 $(function() { $("#slowStuff").load(theUrl, etc.) });

See load docs .

Make a request to (JSP, action, controller, whatever) that displays the JSP with a custom tag in it.

+5
source

Source: https://habr.com/ru/post/1416011/

More articles:


All Articles