Question

当用户点击页面上的链接时，我使用ajax加载新页面，并使用HTML历史记录推送状态来更改标题，没有问题。有一个＆＃34;加载栏＆＃34;在顶部，所以用户知道正在发生的事情。

我想要实现的是在加载ajax加载页面的所有资源后更换页面，现在在.done（）上我只替换了返回的html字符串。< / p>

网站图片很重，所以我被迫： a）用ajax加载页面（相当快） b）当更换html时，我需要显示新的＆＃34; preloader＆＃34;实际加载所有资产

我想避免做b）事情。

代码：

$.ajax({
    url: "urltoload.html",
    context: document.body
}).done(function(data) {
    var newDoc = document.open("text/html", "replace");
    newDoc.write(data);
    newDoc.close();
});

我正在替换整页（包括脚本），因为加载的页面中充满了资源（大图像），我使用这个很棒的工具waitForImages在真正显示页面之前加载所有资源。< / p>

首先我用ajax加载页面，然后当页面被替换时我加载图像以显示页面。我想把它合并到一个装载上。

Answer 1

将此附加到body标记的index.html页面。

<body onload="loadcontent()">

这是js部分（在下面的代码中替换“YourContentFileUrl.html”，文件url通过ajax请求获取）：

function loadcontent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
       document.open();
    document.write(xhttp.responseText);
    document.close(); 
    }
  };
  xhttp.open("GET", "YourContentFileUrl.html", true);
  xhttp.send();
}

将pAjax与资产加载相结合

1 个答案: