jQuery whole HTML page load with spinner

前端未结

关注

 4  703

I am trying to something simple -- make a jQuery script that will wait to show the entire page, including all DIVs, text, and images. While the page is loading, instead of showi

相关标签:

4条回答

执念已碎

2021-02-04 05:34
First do you mean everything in the between the body tags? The best way to do the spinning gift is to add a class that defines the gif as none repeat and centered. The remove the class when the page is ready to be shown.
```
$('body').addClass('loading')
$('body').removeClass('loading')
```
This is always the best technique because if you submit something then try to add the gif through a DOM addition some browsers will not do it because the page has been submitted.
0 讨论(0)
发布评论:

提交评论
- 加载中...

温柔的废话

2021-02-04 05:35

I would cover the entire page with an overlay, and then remove the overlay once the page loads. You can tweak this to also show a loading.gif if you'd like. Here's an example:

HTML

<body>
<div id="container">
    <h2>Header</h2>
    <p>Page content goes here.</p>
    <br />
    <button id="remove_overlay">Remove Overlay</button>
</div>
</body>

CSS

#container{padding:20px;}

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}

#overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:2305px !important; /*change to YOUR page height*/
        background-color: #000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}

jQuery:

$(document).ready(function () { 

        // Set a variable that is set to the div containing the overlay (created on page load)
        var page_overlay = jQuery('<div id="overlay"> </div>');

        // Function to Add the overlay to the page
        function showOverlay(){
            page_overlay.appendTo(document.body);
        }
        // Function to Remove the overlay from the page
        function hideOverlay(){
            page_overlay.remove();
        }

        // Show the overlay.
        $(showOverlay);

       });
});

$(document).ready(function () { 
    $(hideOverlay);
});

You'll need to tweak this so that it loads the overlay as soon as the page is requested (tweak the $(showOverlay); call so that it fires before document is ready.

Here's a simple working fiddle with a button to remove the overlay. You should be able to go from there :) http://jsfiddle.net/3quN5/

0 讨论(0)

长情又很酷

2021-02-04 05:43
I think the best way would be to have a 'cover' div which will cover the whole page whilst it loads. It would be opaque, and would contain your GIF.

The following would then hide the div once the page has loaded:
```
$(document).ready(function() {
  // Hide the 'cover' div
});
```
The following would make the div the size of the page:
```
.div{
  height:100%;
  width:100%;
  overflow:hidden;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

甜味超标

2021-02-04 05:54

$(document).ready(...) fires as soon the DOM is loaded. This is too soon. You should use $(window).on('load', ...):

JavaScript:

$(window).on('load', function(){
    $('#cover').fadeOut(1000);
})

CSS:

#cover {
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
}

HTML:

<div id="cover"></div>
<!-- rest of the page... -->

look at this jsFiddle: http://jsfiddle.net/gK9wH/9/

0 讨论(0)