加载下一页并等待点击答案

【问题标题】：Load next page and wait for click加载下一页并等待点击
【发布时间】：2012-12-05 18:08:24
【问题描述】：

我只是在构建一个小游戏，所以我加载了第一页（介绍），然后，我需要立即开始加载第二页（游戏的第一级，但只需加载 , 不显示），然后等待用户点击显示..

这是我现在的代码：

在我的 html 页面中：

<body id="loadlevel">

在我的 JS 页面中：

var level1 = "level1.html";
$("#loadlevel").load(level1).fadeIn("slow");

但它会立即显示加载的页面！..

如何加载下一页然后等待用户输入显示加载的页面？..

我虽然使用了 JQuery hide() 和 show()，但是 hide() 会隐藏整个页面（也是当前页面）;)

【问题讨论】：

你可以加载到隐藏字段中，然后显示出来
您需要更改浏览器中的网址吗？如果没有，您可以尝试使用 2 个 iframe 的技巧：一个具有当前级别是可见的，另一个是隐藏和预加载的。单击时只显示下一个，隐藏当前并开始预加载下一个级别。
当我们可以只使用 div 时，为什么还需要 iframe？
@pxx - 我不建议使用 iframe。
@LazKarimov，预加载页面不仅可以包含 HTML，还可以包含 CSS 和 JS。它可能会影响现在的。

标签： javascript jquery jquery-load

【解决方案1】：

创建一些不可见的字段并加载数据。

<div id="temp" style="display:none;"></div>

然后在JS中

var level1 = "level1.html";
$("#temp").load(level1);

和

$('#start').click(function(){
   $('#main').html($('#temp').html());
});

【讨论】：

【解决方案2】：

最好的办法是拥有一个最初用 css 或 jquery 隐藏的主 div，然后将内容加载到那里并淡入。

【讨论】：

【解决方案3】：

.load()-从服务器加载数据并将返回的 HTML 放入匹配的元素中。

每当即将发送 Ajax 请求时，jQuery 都会检查是否还有其他未完成的 Ajax 请求。如果没有进行中，jQuery 会触发 ajaxStart 事件。此时会执行所有已使用 .ajaxStart() 方法注册的处理程序。

css:

.get-in{
   background:white;
   position:absolute; // or fixed
   left:0;
   top:0;
   width:100%;
   height:100%;
}

jQuery:

$('#loadlevel').ajaxStart(function() {
  $('<div/>').appendTo('body').addClass('get-in');
});

$('.get-in').on('click', function(){
   $(this).fadeOut("slow");
});

【讨论】：