将pAjax与资产加载结合起来

Question

当用户单击页面上的链接时，我正在使用ajax加载新页面，并使用HTML历史记录推送状态更改标题，在那里没有问题。 顶部有一个“加载栏”，因此用户知道发生了什么事。

我想要实现的是一旦从ajax加载的页面加载了所有资产后就替换页面，现在在.done（）上，我仅替换返回的html字符串。

网站的图片非常繁多，因此我不得不：a）用ajax加载页面（相当快）b）替换html时，我需要显示新的“ preloader”以实际加载所有资产

我想避免做b）事情。

码：

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

我要替换整个页面（包括脚本），因为加载的页面充满了资产（大图像），因此我正在使用此强大的工具waitForImages在真正显示页面之前加载所有资产。

因此，首先我用ajax加载页面，然后在替换页面时加载图像以显示页面。 我想将其合并到一个加载中。

Answer 1

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

<body onload="loadcontent()">

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

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 个解决方案

解决方案1
0 2016-02-10 11:08:01

将pAjax与资产加载结合起来

问题描述

1 个解决方案

解决方案1 0 2016-02-10 11:08:01

解决方案1
0 2016-02-10 11:08:01