無縫頁面加載

我在這裏看到了一些類似的問題，但我沒有看到任何可以幫助我的東西。我正在製作一個網站，我希望每個頁面都可以在加載時淡入淡出，並在有人點擊鏈接時淡出。我有這樣的jQuery，但頁面之間有一個白色的Flash之前頁面加載。我試着移動我的JavaScript，但在某些情況下，頁面加載不正確。我對此有點新，所以我可能需要對任何可能的解決方案進行一些解釋。無縫頁面加載

這裏是現場直播： http://codyshawdesign.com

的HTML是4.01過渡有效。我聽說過像Ajax或分頁這樣的東西，但我不確定如何實現這些或我必須做些什麼才能將其放入我的網站，或者它甚至是最理想的解決方案。謝謝你的幫助！

來源

2012-03-24 xistag

你應該真的經歷你的代碼並在任何地方添加分號。你在大多數代碼行上都忽略了它們，這意味着你的網站將在非現代瀏覽器上破解。 – 2012-03-24 14:17:59

你在說javascript嗎？我計劃一旦完成了網站代碼的完善，希望能夠做到這一點，但謝謝！ – xistag 2012-03-26 23:13:52

我不會採取快捷方式，而且我也會按照寫作的方式編寫語言。 – 2012-03-27 11:48:43

你不應該只更新頁面的一部分，而不是整個頁面？現在您有許多具有不同文件名的全量程頁面。頁面地址發生變化，因此整個頁面都被加載。這就像用ctrl+r/cmd+r頁面刷新當前頁面，這不是很好的ajaxy。

一種解決方案是擁有一個主頁面，其中包含頁面之間的所有常用元素，如頁眉，頁腳和導航欄。在該頁面上，您有一個div（或其他區域），您可以在其中從不同文件動態加載信息。加載什麼信息可以通過錨定標記或ajax表單按鈕確定GET變量。

查看例如此鏈接和它的演示。 http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

這是非常基本的，但它表明的想法不加載整個頁面，但只有一部分。添加一些樣式，你就可以開始了。

對不起，如果這沒有幫助。也許有一種方法可以在沒有白色閃光的情況下刷新整個頁面。簡單的解決辦法是將背景顏色更改爲白色，但再次，它不會是非常ajaxy ...

來源

2012-03-24 14:20:06

我原來是用整頁紙去的，因爲我看過一篇文章說，搜索引擎很難找到用ajax構建的文件。我希望在那裏能夠毫不費力地跳到投資組合頁面，而不必首先瀏覽主頁，但是這段代碼聽起來像是圍繞着這一點起作用的。該頁面上的示例與我正在查找的內容非常接近，但是當我單擊一個鏈接時，它重新加載了我的內容，但是當我再次單擊它時，它會加載新內容（使用Google Chrome）。希望我可以在Chrome瀏覽器中尋找解決錯誤的方法。 – xistag 2012-03-26 23:18:59

我通過您引用的網站找到了一個很好的解決方案。 http://cmpolis.github.com/Pagify/#about – xistag 2012-03-27 02:52:37

@xistag這是很好的知道。我忘記了Google關於動態創建頁面的索引問題。（我只在沒有搜索引擎的Intranet中使用動態內容）。以下是一些可能有用的文章：http://coding.smashingmagazine.com/2011/09/27/searchable-dynamic-content-with-ajax-crawling/，http://arnoldit.com/wordpress/2008/ 04/20/indexing-dynamic-databased-content/ – 2012-03-27 07:50:11

隨着分頁，你將不得不返回所有頁面，當用戶訪問您的index.php和那麼當用戶點擊菜單中的鏈接時，你會使用javascript來顯示和隱藏正確的div，這對你的情況並不好，即使他不願意看到它，它也會讓用戶等待整個站點。

AJAX似乎是正確的方式，你可以很容易地實現它與jQuery加載方法。只是爲了讓你開始：

$(function(){ 
    $("a").click(function(e){ 
     e.preventDefault(); 
     $("#pageContent").load($(this).attr("href")); 
    ); 
});

這應當引起所有的鏈接，以取代由鏈路返回的內容pageContent div的內容，而不閃爍的屏幕。

來源

2012-03-24 15:27:21

我將代碼添加到名爲ex.php的頁面中，以查看它是否可行。我知道它只會複製其他文件中的內容，並且我需要在完全運行之前編輯html，但代碼似乎根本沒有執行。相反，它加載了整個頁面而不是隻替換div。 – xistag 2012-03-26 23:12:51

你檢查了JavaScript控制檯的錯誤嗎？ – 2012-03-29 12:56:26

無縫頁面加載

回答

相關問題