有没有办法无缝页面加载,复杂的页面,嵌套的AJAX?

时间:2012-05-30 08:17:15

标签: jquery html ajax event-handling

好的,我花了一整天时间试图改进我的无缝页面转换方法。以前我有一个简单的解决方案。当用户点击进入网站上的另一个页面时,我在内容上做了一个jQuery slideUp并且淡化了背景以匹配即将到来的页面(因为每个页面都有自己的背景)。然后我加载新页面,该页面以“向上滑动”位置开始,然后在window.load()之后向下滑动。

它工作得很好,避免了任何复杂情况,因为它确实加载了新页面。但是,当新页面加载时,大多数时候都会出现这种微小的闪烁。我以为我可以做得更好。我见过其他花哨的网站可以顺利淡入淡出新页面,为什么我不能这样做呢?

所以我完全重写了一些东西,以便旧的内容被擦除,而另一个页面的内容被加载到AJAX中。然后我还必须加载并运行与新页面相关的脚本,包括从Flickr和Soundcloud加载带有更多AJAX的项目。除了一个主要问题,我实际上已经完成了所有工作。我不能再指望window.load()来触发slideDown。一切都完成后,我无法想办法让slideDown发生。

如果我正在加载简单的静态页面,我认为可以使用$ .load()回调来触发向下滑动。但在我的情况下,我正在加载的页面正在进行进一步的AJAX调用,因此页面只是标题或其他内容“空”,然后幻灯片发生,然后Flickr的所有图片都堆积在一起,破坏了平滑的幻灯片效果。

当我在“页面”之间来回跳跃时,还有一些令人不安的怪癖,所以我想知道这整个努力是否只是为了灾难。也许我应该保留我简单的过渡方法?但是,有什么方法可以在内容跳转到新页面时最大限度地减少内容的闪烁?

1 个答案:

答案 0 :(得分:0)

我实际上提出了一个通过iframe检索页面的解决方案,并在iframe中有一个window.load事件,当它完成加载时通知它的父页面(直到它的ajax请求全部进入才会发生) )然后将iframe的内容附加到父页面并删除iframe。这不是一个非常有效的解决方案,而jquery Flickr插件在IE中导致错误,所以我废弃了整个iframe的东西并用PHP加载了flickr feed。我认为这是要走的路。尽可能使用服务器端代码而不是嵌套的ajax调用。