requirejs - UI that depends on slow loading javascript -


all of scripts page being concatenating / optimized (requirejs) single file. stands, script takes while load depending upon browser , network connection ~ 0.5 mb.

on 1 of main landing pages users funneled to, have interaction (e.g. button, lets call "click me button") dependent upon script - event handlers etc. in other words, button nothing until script has been downloaded , loaded: e.g. empty href.

currently, if testing on old browser or slow connection, user see or of dom including "click me button" before script has finished loading. result, there delay (sometimes few seconds) clicking on button nothing @ all.

i wondering:

  1. is there perhaps way architect such can remove delay between time button shown when clickable (via js interaction). remember scripts page concatenated single file. can try , trim down size of file, still feels wrong because there theoretically possible lag.
  2. is there else in description stands out undesirded architecture. such perhaps giving button default, non js-dependent, behavior if user click happens - feels bit strange since there 2 different behaviors depending on how fast user happens click button.

one potential solution might use separate js function hide button in question until dependent larger js file has loaded. use on.load('your js file) command in conjunction hidden css class on particular button div. 

   onload=function() {       document.getelementbyid('button').classname='visible'; }

you might consider separating js function in question out , loading when dom ready. document.ready particular functionality guaranteed available while other ui , js functionality still being loaded in background.

not sure description if either of these feasible in particular case consider. also, have minified webpage/css/js code in question loading times? file size seems large, including public libraries don't need to?


Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more