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

Question

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

我试图通过在页面最初加载后加载所有内容来解决这个问题，这将如何工作？

主要 JS 脚本 link - here

Answer 1

比我的存储在变量中的评论建议更好的方法是在隐藏的 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 class。

Answer 2

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

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

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

我只能使用慢速连接模拟器（Network Link Conditioner for Mac OS X）进行测试，但它运行对我的测试很顺利.

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

Loading up separate html files before they are requested with js

javascript

jquery

html

external

singlepage