Geek asks and answers

How to make user see ugly HTML predecessor when using jQuery UI and RequireJs?

I am trying to adapt jquery-ui codebase to use RequireJs and I am deploying it to a much slower (but scalable) virtualized cloud service than the dedicated host that I used before.

My default pages are the ugly catastrophe of vanilla HTML. The only thing causing this mess is calls to JavaScript functions that give it the appropriate tab controls and layout. In fact, the page is laid out long and vertical ... one section after another ... before I call a function .tabs()that puts them in one block with horizontal control.

(I’m sure that I am “doing it right” in jQuery UI thinking. Without creating the entire user interface with the code to begin with, it can at least be viewed with JavaScript disabled. Although I doubt that anyone is still using Lynx , there are accessibility problems ... or make sure that your content is analyzed by search engines, I will spare you, my old man’s story about how this is an absurd way to achieve content / interface separation: - /)

When I used tags <script>to load third-party library dependencies and $(document).readyrun jQuery UI voodoo, the user never saw the vanilla ugly HTML. Now when I use RequireJs, the file is page.jsdelayed and loaded asynchronously after HTML ... waiting for libraries that are not really needed to handle DOMready. A slower server makes this look really horrible.

I could, of course, use CSS styling to hide the ugliness from the very beginning and overlay the “Loading ...” graphics until the user interface is ready. At first it came to mind, and a similar approach is suggested here:

The jQuery interface interface looks ugly to document.ready

(. , , , RequireJs, . ?)

, , ... , . "" HTML, RequireJs?

+5
3

, CSS-, RequireJs " " script, . SEO JavaScript.

, HTML, CSS JavaScript. / , , , HTML-, CSS JavaScript.

+3

, - node-browserify Javascript- require, JS .

TCP HTTP, , ?

, , , .

, !

+1

JQuery Mobile RequireJS.

" HTML", CSS:

.requireJS-init { visibility: hidden;}
.requireJS-init.done { visibility: visible;}

.requireJS-init, , , done ( ).

:
1.

2. IE8, ( ) JQuery Mobile , .

HTML- BODY , , .

CSS:

.ui-mobile-rendering:before { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    bottom: 0;         
    left: 0; 
    right: 0; 
    display: block; 
    height: 100%; 
    z-index: 0; 
    background:#fff url(../images/ajax-loader.gif) no-repeat center center; 
    content: "" 
    }

The ui-mobile-rendering class is on the body, and JQM makes it widgets. Once the page is completed, the class will be deleted. By adding full-screen mode: earlier - in this case, with the JQM loader as the background image - you will hide everything on the page until it is shown. There is no need for visibility: hidden, IE8 does not complain (thank God IE8 and FF3.6 know: before).

+1
source

More articles:


All Articles