Geek asks and answers

Adding a page loader using jquery

I need a little help. I don’t know where to start. I need to add a page downloader to my site. I submit the form first, and then use SimpleXML to invoke the external xml sheet using expedia. It takes a minute to download, so I would like to add an image downloader to this page. But how do I do this? I looked at google and did not find any useful information.

I need it to show the loader until the COMPLETE page loads.

+3
source share
3 answers

This has many solutions, but simple:

1- DIV BODY.
2- window.load document.ready, 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>

( )

+14

spin.js http://fgnass.github.com/spin.js/

var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
// Even more options available.... 
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);

:

$("#loading").data('spinner').stop();
+3

HTML

Add the following HTML after opening the tag. This loader div will show the loaded image when the page loads.

<div class="pageloader"></div>

CSS

.pageloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('images/yourLoaderImage.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;

}

Javascript

First enable the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Now add the following line of code to hide the uploaded image while the page is loading fully.

<script type="text/javascript">
$(window).load(function() {
    $(".pageloader").fadeOut("slow");
});
</script>

It works completely for me.

+1
source

More articles:


All Articles