deepson2 Posted July 1, 2009 Share Posted July 1, 2009 Hello, how can we show the image before the page is getting fully load. something like page is loading. basically i want to show loading image before my whole fetched data's not come or load on that page. can anyone here tell me how can i do that? thanks in advance Quote Link to comment Share on other sites More sharing options...
trq Posted July 1, 2009 Share Posted July 1, 2009 This is a Javascript question and ought be posted in the Javascript board. Quote Link to comment Share on other sites More sharing options...
deepson2 Posted July 1, 2009 Author Share Posted July 1, 2009 I have sent the request to moderator to move this threat to java scripts forum. but yet its not moved. so can anyone help me here only. Quote Link to comment Share on other sites More sharing options...
deepson2 Posted July 1, 2009 Author Share Posted July 1, 2009 actually the following code is working. but it showing the images as well who are getting loaded. here is my code <?if(!$userid){?> <body id="free" onload="document.getElementById('lbar').style.display = 'none';"> <?}else{?> <body onload="document.getElementById('lbar').style.display = 'none';"><?}?> <div id="lbar"> <img src="<?=$retpath;?>/images/ajax-loader.gif" width="30" height="39" alt="City" /> </div> // and this is my left container which should be shown after it geeting loaded fully <div id="main-content"> <div class="left"> <div class="recentnessText"> <span><img src="images/icon_recentness.gif" width="20" height="16" alt="Icon - Recentness" /></span><h2>Recentness</h2></div> <div id="blogSnaps"> <div class="snap1"><a href="/blogs/<?=$ids[$arr[0]];?>/" title="<?=$img[$arr[0]];?>"><img src="<?=$imagepath[0];?>" width="143" height="107" border="0" alt="<?=$img[$arr[0]];?>" /></a></div> <div class="snap1"><a href="/blogs/<?=$ids[$arr[1]];?>/" title="<?=$img[$arr[1]];?>"><img src="<?=$imagepath[1];?>" width="143" height="107" border="0" alt="<?=$img[$arr[1]];?>" /></a></div> <div class="snap1"><a href="/blogs/<?=$ids[$arr[2]];?>/" title="<?=$img[$arr[2]];?>"><img src="<?=$imagepath[2];?>" width="143" height="107" border="0" alt="<?=$img[$arr[2]];?>" /></a></div> </div> </div> can anyone tell me how can i show only loading image only before my page is getting fully loaded? Quote Link to comment Share on other sites More sharing options...
deepson2 Posted July 2, 2009 Author Share Posted July 2, 2009 Any Help??? Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted July 2, 2009 Share Posted July 2, 2009 Have a look at this JS framework http://extjs.com/products/extjs/ Under the Misc Samples there is a page loader progress bar Quote Link to comment Share on other sites More sharing options...
deepson2 Posted July 2, 2009 Author Share Posted July 2, 2009 Thanks for the much awaited reply! They have shown how the page is loading and then showing the page actually. for me i want to show this loading image until data is getting fetched from database. but now its showing me both simoultenously. could you please tell me how can i show the only loading image before the actual page content gets loaded fully? like this site blogged.com please help me Quote Link to comment Share on other sites More sharing options...
deepson2 Posted July 3, 2009 Author Share Posted July 3, 2009 Solved my problem. just made changes with the help of other forums. like this <body onload="document.getElementById('lbar').style.display = 'none';document.getElementById('main-content').style.display = 'block';"> and <div id="main-content" style="display:none"> Hope this will help someone who is really looking for it. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.