加载单独的html文件，然后用js请求它

所以我有this作为我的源代码，一切都很好，除了当我尝试加载缓慢的互联网连接页面。会发生什么是当前页面淡出和回来，并在外部html文件的内容加载后，它只是弹出。加载单独的html文件，然后用js请求它

我想解决这个问题，只需加载页面加载一切最初，这将如何工作？

主要JS脚本链接 - here

来源

2015-10-10 dubplay

您可以将html加载到变量中并根据需要使用它们。 – Stef

@Stef看起来像'var home = null; home.src =“home.html”;'？ – dubplay

我发布这个作为一个单独的答案，因为它侧重于您目前的做法。

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

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

我只能用慢速连接模拟器（网络连接空调为Mac OS X），以测试这一点，但它对于我的测试运行平稳。

来源

2015-10-10 18:06:50 Stef

是的，正是我在找的，谢谢。我+ 1nned，但我有不到15代表所以它不显示:) – dubplay

不用担心！我们都去过那里。很高兴我能帮上忙。 – Stef

比我的意见建议，在变量来存储将呈现隐藏层的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 }

现在使用背景填充的div。我推迟加载，直到页面为用户做好准备，以便您不阻止用户交互。您的菜单点击将负责添加/删除每个div的.hidden类。

来源

2015-10-10 16:31:19 Stef

是的，但是一旦我提出了一个包含多个东西的下拉菜单，会不会得到太多？想象一下那个index.html文件中的所有东西。疯狂。这就是我按照自己的方式处理问题的原因。虽然我很欣赏答案。 – dubplay

@dubplay当然。无论如何，这不是一个可扩展的解决方案。 – Stef

加载单独的html文件，然后用js请求它

回答

相关问题