liveandream liveandream - 6 months ago 24
Javascript Question

Adding a page loader with jquery

I need a little help. I do not know where to start. I need to add a page loader to my website. I first submit a form it then uses SimpleXML to call an exterior xml sheet with expedia.. It takes a minute to load, so I would like to add the image loader to this page. But how do I go about doing this? I have looked on google and could not find any useful info.

I need it to show the loader until the COMPLETE page has loaded.

Answer

This has many solutions, but a simple one is to:

1- Create an overlay DIV with your loader stuff and prepend to BODY;
2- Add an event listener for window.load or document.ready event that hides this DIV.

// On the first line inside BODY tag
<script type="text/javascript">
    jQuery("body").prepend('<div id="preloader">Loading...</div>');
    jQuery(document).ready(function() {
        jQuery("#preloader").remove();
    });
</script>

(code typos fixed)

Comments