Question

所以我有this作为我的源代码，除了我尝试使用慢速互联网连接加载页面时，一切都很顺利。会发生什么事情是当前页面被淡出并重新进入，并且在加载外部html文件的内容之后它就会弹出。

我正试图解决这个问题，只需在最初加载页面后加载所有内容，该怎么办？

主要JS脚本链接 - here

Answer 1

我将此作为单独的答案发布，因为它侧重于您当前的方法。

不使用.load()，而是使用.get()，因此不会立即替换div的内容。然后.fadeOut() div，替换HTML，.fadeIn()成功。

$.get("news.html", function(data) {
    $("#content").fadeOut(function() {
        $(this).html(data);
    }).fadeIn();
});

我只能使用慢速连接模拟器（适用于Mac OS X的网络链接调节器）对其进行测试，但是我的测试运行顺利。

Answer 2

比我的注释建议更好的存储变量的方法是在隐藏的div中呈现HTML并根据需要显示它们。这样你就只能渲染一次。

<强> HTML

<div id="content">
    <div class="hidden" id="home"></div>
    <div class="hidden" id="news"></div>
    <div class="hidden" id="contact-us"></div>
</div>

<强> CSS

.hidden { display: none }

现在在后台使用.load()来填充div。我推迟加载，直到页面为用户准备好，这样您就不会阻止用户交互。然后，您的菜单点击将负责从每个div添加/删除.hidden类。

在使用js请求之前加载单独的html文件

2 个答案: