Jquery Page Overlay

请耐心等待，因为我是JQuery和AJAX的新手。我会尽力解释我需要的细节。Jquery Page Overlay

我有一个页面，其链接重定向到同一个域上的另一个页面。我想要做的就是按照我写的顺序。

触发覆盖页面上的链接被点击
保留覆盖，直到抓取网页完全加载，然后将其删除

我认为当“而页面加载，请稍候”一旦页面被提取并加载，来自前一页面的覆盖将不再可见/有效。但是如何或何时在抓取的页面上创建叠加层？

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

谢谢。

2011-11-02 asyadiqin

如果抓取网页，你的意思是实际去到一个新的页面，日ere无法加载该页面，而前一页仍然可见（任何事情都是可能的，但它会过于复杂）。如果你的意思是你的意思，你可以在新页面上创建一个100％div的覆盖文本，将文本全部打开，然后通过设置document.ready或window.onload将其删除（或者使用jQuery hide，一样）。 – adeneo

如果页面位于iFrame内，该怎么办？ –

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

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

对于原始页面，只要点击按钮/链接，就可以放置覆盖图。只要浏览器清除窗口以准备下一页加载，它可能不会保持可见状态。

在整个过程中没有看到窗口清楚的情况下无缝覆盖的唯一方法是不是每个实际加载新的页面URL。相反，您必须使用Ajax获取新内容，并使用Javascript将其放置在叠加层下方。当然，这不会导致URL栏中的URL更改，但会为您带来持续的覆盖行为。

来源

2011-11-02 03:38:40 jfriend00

这正是我需要的。我不介意在每个新页面上添加叠加层，因为没有太多。大多数页面都有通过AJAX.request获取的内容，并且我可以正常工作，但是它的初始页面加载是我想要覆盖的。对CSS也不太好。你可以发布CSS来创建一个覆盖新的页面与居中的div，将文本/图像状态，该页面正在加载？ – asyadiqin

这个概念很简单。设置一个包含所有页面内容的包装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(); 
       } 
      }); 
     } 
    } 
});

来源

2011-11-02 03:58:33 AlienWebguy

您的方法与我在放置在通过AJAX.request获取内容的某些页面上的方法类似。但是我正在寻找的是如果新的页面完全是一个新的页面。例如，链接地址= www.mydomain.com/page1 新页面URL = www.mydomain.com/page2 那么我需要在代码中更改什么？ – asyadiqin

Jquery Page Overlay

回答

相关问题