Question

是否可能加载html页面，然后当它完成加载包括图片在内的所有元素后，它将继续移动到该页面？

例如，用户从page1开始，然后page2开始加载，然后当page2完成加载后，它进入page2？仅使用javascript或 javascript库可以实现这一点吗？

另外page2就像在上面说20张图片，所以我想加载所有这些图片和n显示页面2？

提前致谢

Answer 1

使用jQuery非常简单。

在page1.html中有<div>：

<div id="pnlPage2Container"></div>

然后在第1页中使用此代码：

$(document).ready(function() {
    var oContainer = $("#pnlPage2Container");
    oContainer.hide();
    oContainer.load("page2.html", function() {
         oContainer.show();
    });
});

这应该做到以下几点：

隐藏容器。
在隐藏时将第2页内容加载到容器中，因此用户不会看到它正在加载。
只有当内容完成加载后，容器才会显示。

Answer 2

您可以使用AJAX并将正文内容设置为第2页，如此

<head>
<script type="text/javascript">
function loadPage2()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("body").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","page2.php",false); //setting asynchronous to false will stop more JS being executed until this is done
xmlhttp.send();
}
</script>
</head>
<body id="body" onload="loadPage2()">
<!-- Page 1 stuff -->
</body>

Answer 3

不是100％你的意思，但HTML5预取是否有用？

http://davidwalsh.name/html5-prefetch

用js加载一个html页面

3 个答案: