Question

请关注我，因为我是JQuery和AJAX的新手。我会尝试详细解释我需要的东西。

我有一个页面，其中包含重定向到同一域上另一个页面的链接。我想按照我编写的顺序执行以下操作。

点击链接时触发'请等待页面正在加载'覆盖在页面上
保留叠加层，直到提取的页面完全加载然后将其删除

我认为只要提取并加载页面，上一页的叠加层将不再可见/有效。但是如何或何时在获取的页面上创建叠加层？

我知道我可以使用$（document）.ready来删除新页面上的新叠加层，但是我在使用抓取页面创建叠加层时遇到了一些困难。简而言之，我如何以及在何处放置JQuery代码以在页面上创建叠加层，以便在页面完全加载之前触发它。希望这不会太混乱。

感谢。

Answer 1

这个概念非常简单。设置一个包装器div，它将包含您的所有页面内容，并通过AJAX将数据加载到该容器中。在AJAX请求之前，显示叠加层，当数据更新时，隐藏叠加层。

<强> 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();
                }
            });
        }
    }
});

Answer 2

如果您希望新获取的页面上的叠加层最初可见，则必须将该叠加层构建到新页面的初始HTML / CSS中。然后，您可以使用$(document).ready()中的javascript删除叠加层。你必须这样做，因为你无法运行javascript来操纵新页面中的DOM，直到它完全加载。在运行此javascript之前，它通常会部分或完全可见。因此，如果您希望新页面中显示的初始状态具有叠加层，那么您必须将叠加层直接烘焙到新页面的HTML / CSS中，以便显示它的显示方式。

然后，当它成功加载并且DOM已完全加载时，$(document).ready()中的代码将会触发，然后将删除叠加层。

对于原始页面，只需单击按钮/链接即可立即设置叠加层。它可能不会长时间保持可见，因为浏览器会清除窗口以准备下一页加载。

在整个过程中无需覆盖的情况下，无需看到窗口的唯一方法就是不是每个实际加载新的页面URL。相反，您必须使用Ajax获取新内容并使用Javascript将其放置在叠加层下方。当然，这不会导致URL栏中的URL发生变化，但会让您获得连续的叠加行为。

Jquery页面叠加

2 个答案: