How to preload a document and presenting it on screen only when the browser finish loading data from server

Question

Is there a way of presenting everything on screen at the same time when all the document, DOM, images, AJAX's calls, objects and other stuff finished loading?

That is instead of showing them "in-parts" as the browser gets the information from the server.

Any solution will be useful.

possible duplicate of [Execute Javascript When Page Has Fully Loaded](http://stackoverflow.com/questions/1033398/execute-javascript-when-page-has-fully-loaded) — hjpotter92, Apr 20 '13 at 09:37

Alex W · Accepted Answer · 2013-04-20T03:02:52.990

1

Set everything to display:none; until the jQuery AJAX success() method fires, which can then set the display properties back to normal.

Also, make sure the AJAX code is inside of the window.onload or $(window).on('load') handler.

The downside of this is that if the Ajax call is unsuccessful, your page will not display, so you should also define an Ajax error() method in jQuery.

Edit:

For showing images when they are done loading (Put outside onload):

$('img').each(function()
{
    $(this).css('display','none');
    $(this).on('load',function(){$(this).css('display','');});
});

Also, you will want to display some type of loading symbol to improve the user experience.

edited Apr 20 '13 at 03:02

answered Apr 20 '13 at 02:50

Alex W

37,233
13
109
109

1

That's good for AJAX's calls but what about loading few images from the server? Is there a solution for presenting them only when the browser finish loading them from the server? – Lior Elrom Apr 20 '13 at 02:56
That's also very good for the images! and for that I gave you a credit! I'm still looking for some buit-in or simple way to know when a browser finishing the loading process. than it can cover all kind of data... – Lior Elrom Apr 20 '13 at 03:06
@Lior `window.onload` [waits for everything](http://stackoverflow.com/questions/3520780/when-is-window-onload-fired) *including images* to be loaded and rendered before it fires. The only exception is Ajax, which I mentioned above. – Alex W Apr 20 '13 at 03:12
I'm familier with window.onload and you're right regarding the images. I'm currently checking some other solution. I'll post to you after that. – Lior Elrom Apr 20 '13 at 03:14
1

@Lior Instead of using jQuery to set the CSS for the images to `display:none;` just put `img {display:none;}` in your CSS file, the rest of the code will then display the image as it gets loaded. Btw, you likely want `visibility:hidden` since it hides the element visually, but has it mantain its content space so layout is formatted correctly. With `display` you hide the element including the space it takes up which is the same as letting it load anyway and would thus be useless in doing. – kittycat Apr 20 '13 at 04:49

score 1 · Answer 2 · answered Apr 20 '13 at 02:59

1

You can try hiding the page with an overlay like in this plugin

Quick and easy.

answered Apr 20 '13 at 02:59

Steffan

719
5
8

That's nice however I'm still looking for a more built-in solution. – Lior Elrom Apr 20 '13 at 03:01

score 1 · Answer 3 · answered Apr 20 '13 at 03:20

1

Working with @timss's answer try this:

Set the body to visibility: hidden

jQuery(window).load(function () {

            $("body").css({"visibility":"visible"});
});

answered Apr 20 '13 at 03:20

Steffan

719
5
8

score 1 · Answer 4 · edited May 23 '17 at 12:18

Found this source at Prioritize the content in a webpage to be loaded He claims that it preloads the entire page before displaying it.

<script language="javascript" type="text/javascript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
function loadImages() {
if (document.getElementById) {  // DOM3 = IE5, NS6
document.getElementById('hidepage').style.visibility = 'hidden';
}
}
window.onload = loadImages;
//  End -->
</script>
<div id="hidepage" style=" background-color: #FFFFCC; layer-background-color: #FFFFCC;     width: 100%;">
<table width=100%><tr><td>Page loading ... Please wait.</td></tr></table></div>

My solution:

This is a rough draft of how to do it, but if you finalize it it'll work. Prioritize the order in which everything loads. Use the onload jsHide function.

<DIV ID="idElement2"><IMG SRC="Airplane.gif">         onLoad="javascript:jsHide('idElement2');return true"></DIV>


<DIV ID="idElement5"><IMG SRC="stuff.gif"      onLoad="javascript:jsShow('idElement5');jsShow('idElement3');jsShow('idElement4');return true"></DIV>

set idelement5 to load last, and upon load it will Show all the other element ids.

That code is almost 14yrs old, there are better and modern methods to do it. Also, event handlers do not accept URI schemes. — kittycat, Apr 20 '13 at 04:42

score 0 · Answer 5 · answered Apr 20 '13 at 02:49

0

window.onload = function () { 
    alert("Page loaded!") 
}

answered Apr 20 '13 at 02:49

timss

9,982
4
34
56

Using onload will start a process of loading images, objects, AJAX's calls and presenting it as it available. I'm looking for something that will wait till the browser finishes getting all the data from the server and then present it in much smoother. – Lior Elrom Apr 20 '13 at 02:54

How to preload a document and presenting it on screen only when the browser finish loading data from server

5 Answers5