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

回答

相關問題