无缝页面加载

Question

我在这里看到过一些类似的问题，但我没有看到任何可能对我有帮助的东西。我正在制作一个网站，我希望每个页面淡入加载和淡出时，有人点击一个链接。我用jQuery记下了这一点，但在页面加载之前，页面之间会有一个白色的闪烁。我试着移动我的javascript，但在某些情况下页面不能正确加载。我对此还是个新手，所以我可能需要一些任何可能的解决方案的解释。

这是实时站点：http://codyshawdesign.com

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

Answer 1

难道你不应该只更新页面的一部分，而不是整个页面吗？现在，您有许多具有不同文件名的全尺寸页面。页面地址会更改，因此会加载整个页面。这就像用ctrl+r/cmd+r页面刷新当前页面一样，这并不是很有意义。

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

例如，请参阅此链接，它是demo。http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

这很基本，但它演示了不加载整个页面，而只加载其中的一部分。添加一些样式，您就可以开始工作了。

如果这不起作用，我很抱歉。也许有一种方法可以刷新整个页面，而不会出现白色闪光。简单的解决方案是将背景颜色改为白色，但同样，它也不会很有光泽……

Answer 2

当用户访问你的index.php时，你必须返回所有页面，然后当用户点击菜单中的链接时，你会使用javascript来显示和隐藏正确的div，这在你的情况下是不好的，它会让用户等待整个网站，即使他不愿意看所有的东西。

AJAX似乎是正确的方式，您可以使用jQuery load方法轻松地实现它。让我们先开始吧：

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

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