将pAjax与资产加载结合起来

Question

I'm using ajax to load a new page when user clicks a link on a page, and using HTML history push state for changing title, no problem there. 当用户单击页面上的链接时，我正在使用ajax加载新页面，并使用HTML历史记录推送状态更改标题，在那里没有问题。 There is a "loading bar" on top so user knows something is going on. 顶部有一个“加载栏”，因此用户知道发生了什么事。

What I'd like to achieve is to replace a page once all assets from ajax loaded page are loaded, now on .done() I'm replacing only html string that's returned. 我想要实现的是一旦从ajax加载的页面加载了所有资产后就替换页面，现在在.done（）上，我仅替换返回的html字符串。

Site is image-heavy so I'm forced to: a) load page with ajax (which is fairly quick) b) when html is replaced, I need to show new "preloader" to actually load all assets 网站的图片非常繁多，因此我不得不：a）用ajax加载页面（相当快）b）替换html时，我需要显示新的“ preloader”以实际加载所有资产

I would like to avoid doing b) thing. 我想避免做b）事情。

Code: 码：

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

I am replacing full page (including scripts), as loaded page is full of assets (large images), I'm using this great tool waitForImages for loading all assets before really showing a page. 我要替换整个页面（包括脚本），因为加载的页面充满了资产（大图像），因此我正在使用此强大的工具waitForImages在真正显示页面之前加载所有资产。

So first I load page with ajax, then when page is replaced I load images to show page. 因此，首先我用ajax加载页面，然后在替换页面时加载图像以显示页面。 I would like to merge it onto one loading. 我想将其合并到一个加载中。

Answer 1

Append this to to your index.html page in body tag. 将此附加到body标记中的index.html页面。

<body onload="loadcontent()">

And this to js part (Replace "YourContentFileUrl.html" in the below code with the file url to be fetched via ajax request): 这是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