A community in which webmasters can ask for help with topics such as PHP coding , MySQL , IT jobs, web design, IT security.
Current location:homephp forumphp talk in 2009 yearIs it possible to preload page contents with ajax/jquery technique? - page 1
User InfoPosts
Is it possible to preload page contents with ajax/jquery technique?#1
Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.

posted date: 2009-04-07 18:10:00


Re: Is it possible to preload page contents with ajax/jquery technique?#2
I had made out the solution of this problem. click to view my topic...

hope that hepls.

posted date: 2009-04-07 18:10:01


Re: Is it possible to preload page contents with ajax/jquery technique?#3
I did something where I needed to know when an image was fully loaded, so I did the preloading with $.get() function and passed a callback function as the last parameter. This way, when the image was actually downloaded, my callback would fire and I would know that the browser already had the image in cache.You can write a function that will increment a global variable for each image you tell it to preload, and then your callback can decrement the counter. When the counter is back to zero, call another function. This function now will fire once all images are preloaded.This is for the images. Everything else can be guaranteed to be loaded when $(document).ready() is fired. So, if you begin your routine at this point, everything on the page should be loaded.

posted date: 2009-04-07 18:24:00


Re: Is it possible to preload page contents with ajax/jquery technique?#4
There(s no need to use Ajax or something, simply set the page(s wrapper div display to none. then change it to block when the document is loaded. the code might be like this, using raw Javascript: ...<script type="text/javascript"> function preloader(){ document.getElementById("preloader").style.display = "none"; document.getElementById("container").style.display = "block"; }//preloader window.onload = preloader;</script><style>...div#wrapper { ... display: none; }div#preloader { top: 0; right: 10px; position:absolute; z-index:1000; width: 132px; height: 38px; background: url(path/to/preloaderBg.png) no-repeat; cursor: wait; text-shadow: 0px 1px 0px #fefefe; //webkit }...</style>...<body> <div id="preloader">Loading... Please Wait.</div> <div id="wrapper"> <!-- page contents goes here --> </div></body>...feel free to comment, if you need this in jQuery. update, in jQuery: ...<script type="text/javascript"> //use $(window).load(fn) if you need to load "all" page content including images, frames, etc. $(document).ready(function(){ $("#preloader").hide(); $("#container").show(); });</script>...Related documents: Events/ready, Events/load, CSS/css & Core/$

posted date: 2009-04-07 19:06:00


Re: Is it possible to preload page contents with ajax/jquery technique?#5
div[id="x"]? Surely just #x?

posted date: 2009-04-08 01:09:00


Re: Is it possible to preload page contents with ajax/jquery technique?#6
If you choose a method where the content is hidden until the whole page is loaded, don(t have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.<body> <script type="text/javascript"> document.body.style.visibility= (hidden(; window.onload= function() { document.body.style.visibility= (visible(; }; </script>Also note that the term ‘preloader’ isn(t really right for what you(re doing here. ‘pre’ implies that you(re increasing performance by having the page fetched and cached so that it(s ready to go by the time it(s needed.But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.(People, that is, except for the kind of dim-witted management types who don(t really use or understand the web but demand that their company(s site appears all at once.)

posted date: 2009-04-08 01:28:00


Re: Is it possible to preload page contents with ajax/jquery technique?#7
This did the trick. And it's simple. If you have the time, please do write a jQuery version; although this works well.

posted date: 2009-04-08 04:21:00


Re: Is it possible to preload page contents with ajax/jquery technique?#8
@bobince Sure the same! so why? StackOverflow considers the statements with preceding # characters as a comment in a code block. simply use that #x.

posted date: 2009-04-10 13:59:00


Re: Is it possible to preload page contents with ajax/jquery technique?#9
I'll update the answer containing the jQuery code asap ;)

posted date: 2009-04-10 14:00:00


Re: Is it possible to preload page contents with ajax/jquery technique?#10
You can do it with jquery easily.SCRIPT$(window).load(function() { $((#preloader().fadeOut((slow(, function() { $(this).remove(); });});STYLESdiv#preloader { position: fixed; z-index: 999; width: 100%; height: 100%; background: #c6d6c2 url(ajax-loader.gif) no-repeat center center; } HTMLdiv id="preloader"

posted date: 2010-11-15 00:14:00


Re: Is it possible to preload page contents with ajax/jquery technique?#11
Alt. jQuery: $("#preloader").hide(); $("#container").show();

posted date: 2010-11-15 01:28:00


Re: Is it possible to preload page contents with ajax/jquery technique?#12
Best wayfunction ajax(){$((#wapal().html((path to image();$.ajax({ url:(somfile.php(, method:(get(, success:function(data){ if(data ==(() return; $((#wapal().html(data); } });}

posted date: 2011-01-13 04:43:00


select page: « 1 2 »
Copyright ©2008-2017 www.momige.com, all rights reserved.