Hello, Your example page does work as it should. Now replace the "Lorum Ipsum" content with content from a SQL Query and it won't work the same way. (at least that is the issue I am having)
- http://meded.ucsd.edu/testQuery.cfm (does not work as expected, doesn't show the loading message while the query is running) - http://meded.ucsd.edu/testStatic.cfm (does work as expected, shows the loading message while the images are loading) Josh On Oct 12, 5:30 pm, Karl Swedberg <k...@englishrules.com> wrote: > You've lost me there. If you're trying to block the page based on some > user interaction, then the blockui plugin should work just fine. I > thought the problem you were having, though, was with the page not > being blocked immediately when the user first visits the page. You > asked about document ready and whether it could fire sooner. I offered > a solution that didn't rely on document ready so that the ui would be > blocked immediately until everything was loaded. > > I put a test page up so you can see that it does, in fact, solve the > problem that you originally > presented:http://test.learningjquery.com/blockui.html > > Note that I added a setTimeout inside the $(window).load() function to > simulate a heavy page. > > --Karl > > ____________ > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > On Oct 12, 2009, at 4:59 PM, sdtacoma wrote: > > > > > Thanks for you help Karl but that didn't seem to solve my problem. > > > I have more info to add to the issue though. The "Loading..." message > > works great if there are say, images on the page loading. It does NOT > > work if I am waiting for a query to finish and it's results to be > > displayed back to the page. > > > Any idea why it would work for one and not the other or how I can get > > it to work with a query too? > > > DOES NOT WORK: > > <script language="javascript" type="text/javascript" src="/tools/js/ > > jquery/jquery_1.2.4b.js"></script> > > <script language="javascript" type="text/javascript" src="/tools/js/ > > jquery/jquery.blockui.js"></script> > > <script> > > $(document).ready(function() { > > $.blockUI(); > > $(window).load(function(){unBlockFunction(); }); > > }); > > function unBlockFunction(){ > > $.unblockUI(); > > } > > </script> > > <cfquery datasource="#application.dsn#" name="qSelect" maxrows="100"> > > select * > > from user_info > > </cfquery> > > <cfdump var="#qSelect#"> > > > DOES WORK: > > <script language="javascript" type="text/javascript" src="/tools/js/ > > jquery/jquery_1.2.4b.js"></script> > > <script language="javascript" type="text/javascript" src="/tools/js/ > > jquery/jquery.blockui.js"></script> > > <script> > > $(document).ready(function() { > > $.blockUI(); > > $(window).load(function(){unBlockFunction(); }); > > }); > > function unBlockFunction(){ > > $.unblockUI(); > > } > > </script> > > <img src="http://wnsl.physics.yale.edu/media/education_full.jpg";><br> > > <img src="http://sprottshaw.com/uploads/images/Misc.%20Images/ > > 242351742.jpg"><br> > > <img src="http://www.nfq.ie/nfq/en/images/FanDec2006.jpg";><br> > > <img src="http://www.efytimes.com/admin/useradmin/photo/The%20Mobile > > %20Computer%20Education%20Bus.jpg"><br> > > > On Oct 10, 9:54 am, Karl Swedberg <k...@englishrules.com> wrote: > >> document.ready fires when the DOM is fully registered. If you have > >> large images in the document, document.ready doesn't wait for those > >> to > >> completely load. So, it's typically earlier than window.onload, but > >> it > >> isn't going to fire before you see stuff on the page. > > >> I haven't tested this at all, and I'm just creating this in email, so > >> proceed with caution ... but you might want to consider putting > >> something like this in the <head>: > > >> <script type="text/javascript">document.documentElement.className = > >> 'js';</script> > > >> and in your stylesheet do this: > > >> #uiblocker { > >> display: none; > > >> } > > >> .js #uiblocker { > >> display: block; > >> left: 0; > >> top: 0; > >> width: 100%; > >> height: 100%; > >> position: fixed; > >> cursor: wait; > >> z-index:1001; > > >> } > > >> and in your html, put this right after the opening <body> tag: > > >> <div id="uiblocker"></div> > > >> and in a javascript file, do this: > > >> $(window).bind('load', function() { > >> $('#uiblocker').hide(); > > >> }); > > >> So, that /should/ work. For IE6 support, you'll need to either > >> simulate position: fixed with a css expression or change it to > >> position: absolute and hope for the best. > > >> Hope that helps. > > >> --Karl > > >> ____________ > >> Karl Swedbergwww.englishrules.comwww.learningjquery.com > > >> On Oct 9, 2009, at 2:27 PM, sdtacoma wrote: > > >>> Hello, > > >>> I am using jQuery and BlockUI to display a "Loading..." message to > >>> the > >>> user while the page is loading. > > >>> The problem is that the "Loading..." message seems to show up AFTER > >>> the page has loaded, not during load. Shouldn't the document.ready > >>> fire sooner than that? > > >>> What am I doing wrong? > > >>> <script> > >>> $(document).ready(function() { > >>> $.blockUI(); > >>> setTimeout($.unblockUI, 2000); > >>> }); > >>> </script>
![http://wnsl.physics.yale.edu/media/education_full.jpg"](http://wnsl.physics.yale.edu/media/education_full.jpg"){kind=link}
![http://www.nfq.ie/nfq/en/images/FanDec2006.jpg"](http://www.nfq.ie/nfq/en/images/FanDec2006.jpg"){kind=link}