Question

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

以下是我的代码：

在我的html页面中：

<body id="loadlevel">

在我的JS页面中：

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

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

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

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

Answer 1

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

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

然后在JS

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

和

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

Answer 2

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

Answer 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");
});

加载下一页并等待单击

3 个答案: