无缝页面加载

Question

我在这里看到了一些类似的问题，但我没有看到任何可能在这里帮助我的事情。我正在创建一个网站，我希望每个页面在加载时淡入，并在有人点击链接时淡出。我把它与jQuery有关，但在页面加载之前有一个白色的闪存。我尝试移动我的javascript但在某些情况下页面没有正确加载。我对此有点新意，所以我可能需要对任何可能的解决方案进行一些解释。

这是现场网站： http://codyshawdesign.com

HTML在4.01 Transitional中有效。我听说过像Ajax或分页这样的东西，但我不确定如何实现这些或我必须做什么才能将它放在我的网站中，或者它是否是最理想的解决方案。谢谢你的帮助！

Answer 1

你不应该只更新页面的一部分，而不是整个页面吗？现在，您有许多具有不同文件名的完整页面。页面地址会发生变化，因此会加载整个页面。这就像使用ctrl+r/cmd+r页面刷新当前内容并且不是很傻。

一种解决方案是拥有一个母版页，其中包含页面之间的所有常用元素，如页眉，页脚和导航栏。在该页面上，您有一个div（或其他区域），您可以从另一个文件动态加载信息。可以通过锚标签或ajax表单按钮使用GET变量确定加载的信息。

请参阅此链接及其演示。 http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

这是非常基本的，但它表明了不加载整个页面而只加载其中一部分的想法。添加一些样式，你就可以开始了。

很抱歉，如果这没有帮助。也许有一种方法可以在没有白色闪光的情况下刷新整个页面。简单的解决方案是将背景颜色更改为白色，但是再次，它不会是非常难看的......

Answer 2

使用分页时，您必须在用户访问index.php时立即返回所有页面，然后当用户单击菜单中的链接时，您将使用javascript显示和隐藏正确的div，这对您来说并不好即使他不愿意全部查看，也会让用户等待整个网站。

AJAX似乎是正确的方法，你可以使用jQuery加载方法轻松实现它。只是为了让你开始：

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

这会导致您的所有链接将pageContent div的内容替换为链接返回的内容，而不会闪烁屏幕。