george Posted March 26, 2012 Share Posted March 26, 2012 I want to show a loading image untill document loads, then hide the loading image. The document I am loading contains a background image loaded from the CSS file, which is large and takes a moment to load, which is why I want to display a loading image first. The background images fine without the jQuery. Infact, they work with the jQuery as well. Only, as it is now, I get a black screen (the default background color) until my image loads, and I am not getting my "Loading" image and message. I have attempted to show my loading image until the background image is loaded with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><!-- saved from url=(0057)http://meyerweb.com/eric/css/edge/complexspiral/demo.html --><title>George Dawson Portfolio->Samples page</title><meta content="text/html; charset=windows-1252" http-equiv=Content-Type><link title="Sweet Eyes" rel=stylesheet type=text/css href="sweeteyes.css" media=screen><script type="text/javascript" src="https://www.google.com/jsapi"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#Loading').hide(); }); </script> </head><body><div id="Dynamic"><div id="Loading"> <img id="Load" src="images/loading.gif" /><span> Loading Data... </span></div></div> But it doesn't work.Any sugestions? Link to comment Share on other sites More sharing options...
thescientist Posted March 28, 2012 Share Posted March 28, 2012 if you don't do any hiding, do you see the loading image? Is it possible that Loading is happening too fast for you to notice? What if you clear your cache you the browser has to reload the background image again, to better simulate what a first time user would see? Link to comment Share on other sites More sharing options...
george Posted March 28, 2012 Author Share Posted March 28, 2012 What if you clear your cache you the browser has to reload the background image again, to better simulate what a first time user would see? Thanks for your reply. On first time visit to the page, the background image takes too long to load. For subsequent page loads, the image is cashed, and the loding image gif will not be noticed. I think my problem is that I am loading a background image via CSS. It is this background image that is taking too long to load. So I am going to try loading the image as a foreground, but hidden image, and then show the loading gif until the DOM loads. Perhaps that will do the trick. Thanks for your feedback. But the image I am trying to load is a background image, and this is somhow messing thihgs up. Link to comment Share on other sites More sharing options...
george Posted March 28, 2012 Author Share Posted March 28, 2012 This did not work. Here is my site. I just want to display one image until another loads, and then load that one. Both are background images. It seems like this should be easy, but I have wasted two days on it now. Here is the site. All the code is in the one index file.One should see the loading gif first time to the site. On a windows machine, Ctrl/F5 will load the URL again, rather than using the cashe. Right now, I have the large background image being loaded via jQuery, and the loading gif as an background image attribute of the body tag. I never see the loading gif, unless I comment out the Query. This makes no sence to me. If jQuery does not get called until after the page loads, then why must I comment it out to see my body tag background image? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 28, 2012 Share Posted March 28, 2012 Use the hidden greyface image to trigger the change when fully loaded <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>George Dawson Portfolio->Samples page</title> <meta content="text/html; charset=windows-1252" http-equiv=Content-Type> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript">$(document).ready(function() { $('#loading_bg').load(function(){ $('body').css({'background-image':'url(http://gdawsonportfolio.com/eyes/images/facegray.gif)', 'background-position':'top' }) ; }); }); </script> <style type="text/css"> body { background-image:url('http://gdawsonportfolio.com/eyes/images/loading.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } #hidefirst { visibility:hidden; } </style> </head><body><div id=hidefirst> <img id="loading_bg" src="http://gdawsonportfolio.com/eyes/images/facegray.gif" /> <img src="http://gdawsonportfolio.com/eyes/images/cropfacecolor.gif" /></div></body></html> Link to comment Share on other sites More sharing options...
george Posted March 28, 2012 Author Share Posted March 28, 2012 Wow, thank you. So, the $('#loading_bg').load(function() waits for the image in my hidden div to load, and then displays the image as background once it is loaded. I need to rethink what $(document).ready(function() does then, because I would have thought that it would not fire until the document image was loaded, seeing as how that is part of the document. I figured that the image was not loading because I had it in a not-visable element. Just trying to make sure I undwerstand why this works, so I do not bang my head against the same tree again .Thanks again Link to comment Share on other sites More sharing options...
dsonesuk Posted March 28, 2012 Share Posted March 28, 2012 Theres a issue with surprise, surprise IE, But! also Opera, as it seems they don't follow the onload instruction correctly, but luckily there's a fix, to bring them into line, $(document).ready(function() { $('#loading_bg').one("load",function(){ $('body').css({'background-image':'url(http://gdawsonportfolio.com/eyes/images/facegray.gif)', 'background-position':'top' }); }).each(function(){ // required for IE and Operaif(this.complete) $(this).trigger("load"); // required for IE and Opera}); }); Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.