如何在获取的页面上创建一个覆盖呢？

我是JQuery和Ajax方面的新手......我有一个带有链接的页面，该链接可以重定向到同一域上的另一个页面。我想做的事情如下：

1、单击链接时，在页面上触发“请在加载页时等待”覆盖；
2、保留覆盖，直到获取的页面完全加载，然后删除它。

我假设，一旦获取和加载页面，来自上一页的覆盖将不再可见/有效。但是，我如何以及何时在获取的页面上创建一个覆盖呢？

我知道我可以使用$(Document)来删除新页面上的新覆盖，但在获取的页面上创建覆盖层时遇到了一些困难。简而言之，我如何以及在哪里放置JQuery代码来在页面上创建覆盖，以便在页面完全加载之前触发它？谢谢！

If you want an overlay on the newly fetched page to be initially visible, then you have to build that overlay into the initial HTML/CSS of the new page. You can then use javascript in $(document).ready() to remove the overlay. You have to do it this way because you cannot run javascript that manipulates the DOM in the new page until it's fully loaded. It will typically be partially or fully visible before you can run this javascript. So, if you want the initial state that shows in the new page to have the overlay, then you have to bake the overlay right into the HTML/CSS of the new page so as it comes up, that's how it displays.

Then, when it loads successfully and the DOM is fully loaded, your code in $(document).ready() will fire which will then remove the overlay.

For the original page, you can just put up an overlay as soon as the button/link is clicked. It probably won't stay visible for long as the browser clears the window to prepare for the next page load.

The only way to seamlessly have an overlay up during the entire process without ever seeing the window clear would be to not every actually load a new page URL. Instead, you'd have to fetch the new content with Ajax and use Javascript to put it into place below the overlay. This, of course, would not result in the URL in the URL bar changing, but would get you the continuous overlay behavior.

The concept is pretty simple. Set a wrapper div which will contain all your page content, and load data into that container via AJAX. Before the AJAX request, show the overlay, when the data is updated, hide the overlay.

CSS:

#overlay {
    position:absolute; 
    width:100%;
    height:100%;
    background-color:rgba(255,255,255,0.8);
    text-align:center;
    z-index:999;
    display:none;
}
#overlay span {
    margin:200px auto 0 auto;
}

HTML:

<body>
    <div id="overlay">
        <span>Please wait while your page is loaded...
    </div>
    <div id="content">
        Page content. <a class="ajax-link" href="#!page2" rel="page2.php">Click for page 2</a>
    </div>
</body>

JQuery:

$('#ajax-link').live('click',function(event){
    event.preventDefault();
    var $this    = $(this),
        $overlay = $('#overlay');

    $.ajax({
        url: $this.attr('rel'),
        beforeSend: function(){
            $overlay.fadeIn();
            window.location.hash = $this.attr('href').replace('#','');
        },
        success: function(data){
            $('#content').fadeOut().html(data).fadeIn();
            $overlay.fadeOut();
        }
        // I'd recommend adding some error handling here as well, possibly 
        // update the overlay text with the error response and gracefully 
        // fail-over to the previous content.
    });
});

// Since we are setting a hashbang when we load new pages, let's also support someone 
// landing on one of these AJAX-loaded pages
$(function(){
    if(window.location.hash){
        if(window.location.hash.indexOf('#!') === 0){
            $.ajax({
                url: window.location.hash.replace('#!','') + '.php',
                success: function(data){
                    $('#content').fadeOut().html(data).fadeIn();
                }
            });
        }
    }
});