Ask:Jquery Loader

JavaScript
1

Hi guys,

is there any jquery that can handle page loader at the first time the webpage its click, my website consist of several jquery that will take time to view correctly so first time visitor will see it a bit messy, so i would like to cover it up with a loading animation untill all jquery files and css files finish loading from my webhosting server.

thank you

2

I would have to think about the element a bit, but off the top of my head I would try something like this.

In your css:


#blanket {
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color:white;
}

Then for the actual element, something like this:


<div id="blanket">Loading...</div>

Then I’d place the script tag at the foot of your document:


<script type="text/javascript">
$(document).ready(function() {
    $('#blanket').hide();
})
</script>

Some things might need to be tweaked a bit in the css, and in trying to have everything loads before the code runs, but hopefully this will give you somewhere to start.

3

Thanks for the reply, I’m not an expert in java coding, so I’m gonna need a bit more detail explanation hehe, so i just simply put this code on top of my other scripts ?

<script type=“text/javascript”>
$(document).ready(function(){
</script>

4

Scallio has a really good point…

It might be better to make the element hidden in the css, and use javascript to display it immediately at the start of your page. This would mean that users who do not have javascript would not get stuck at a covered up page.

The css would look like this instead:


#blanket {
    width: 100&#37;;
    height: 100%;
    z-index: 1000;
    background-color: white;
    display: none;
}

And then in your markup you could put:


<div id="blanket">Loading...</div>
<script type="text/javascript">
    $("#blanket").show();
</script>
5

Covering everything up like this would indeed work, but please take care that people with javascript disabled (or running NoJS or the like) will never see your website, but just div covering everything up.

6

whoa thanks I’ll give it a try

7

You should simply be able to create an element which covers your page so the user can’t see the loading happening behind it.

The trick will be timing the event which will hide this element. You can try simply do this in a $(document).ready function; which might be enough depending on how things in your site are layed out. I personally also try to define widths and heights of as many elements in a sites layout as possible, which prevents things from shifting around as the page loads.