-3

我有一个由 ASP.net 生成服务器端的网页，我无法编辑页面的源代码，我只能添加 HTML、CSS 和 Javascript。

该页面使用旧的基于表格的布局，整个文档写得不好。
我使用 jQuery 获取页面的所有内容（文章、图像、链接等），然后使用 jQuery 将它们插入到新的 HTML 页面中。
当页面准备好时，我使用新页面替换旧页面：

var template = "my long HTML page generated by jQuery before this line";
var newDoc = document.open("text/html", "replace");
newDoc.write(template);
newDoc.close();

这样<script>，我在新页面中的标签也将正确执行，一切都很完美。

我唯一的问题是，当页面被替换时，所有东西都会变成白色约 1 秒。

我需要避免出现空白闪光，所以我想在替换过程中放置​​一个加载页面。

注意：我没有使用 Ajax，我只是使用 jQuery 将运行脚本的页面内容存储在变量中。

我尝试隐藏整个页面并在正文上应用加载图像，但显然它不起作用，页面像往常一样变白 1 秒。

解决方案？

4

1 回答 1

1

这是您所描述的没有“白色”闪光的示例。我制作了一个庞大的示例 html 文档来夸大其词。加载后，我将其替换为加载消息，然后准备新内容。新内容准备好后，我将旧文档替换为新文档，然后将新内容添加到其中。平稳快速。我仍然认为你所做的是一场灾难，但如果你必须这样做，

在 chrome 中查看这个！ 这是一个示例（单击此处进行现场演示）。

var script = '<script>console.log("New Document script tag is working.");</script>';
var newDoc = '<!DOCTYPE html><html><head>'+script+'</head><body></body></html>';

var loading = document.createElement('p');
loading.innerText = 'Loading...';

$(document).ready(function() {
  var content = $('body').contents(); //the content of the old document body
  $('body').html(loading);

  setTimeout(function() { //slow things down for this example
    for (var i=0, contentLen=content.length; i<contentLen; ++i) { //prepare the new content
      var text = content[i].innerText;
      if (text) { 
        text+= ' This text is from the old document, with new stuff added.';
        content[i].innerText = text;
      }
    }

    document.open(); //replace doc
    document.write(newDoc);
    document.close();

    $('body').html(content); //immediately add new content

    script = document.createElement('script');
    script.src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
    script.onload = function() {
      console.log(angular);
      console.log('New Library Added.');
    };
    document.body.appendChild(script);

  }, 1500); //like I said, this is just to exaggerate the load, ignore it
});
于 2013-09-07T03:31:00.170 回答