Javascript 在内容替换期间添加加载动画_Javascript_Jquery

Javascript 在内容替换期间添加加载动画

javascript jquery

Javascript 在内容替换期间添加加载动画,javascript,jquery,Javascript,Jquery,我有一个由ASP.net在服务器端生成的网页，我不能编辑该网页的源代码，我只能添加HTML、CSS和Javascript 页面使用了旧的基于表格的布局，整个文档编写得不好。我使用jQuery获取页面的所有内容（文章、图像、链接等），然后使用jQuery将它们插入到新的HTML页面中。当页面准备就绪时，我使用以下方法将旧页面替换为新页面： var template = "my long HTML page generated by jQuery before this line"; var n

我有一个由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();

这样，我在新页面中的

标记也将正确执行，一切都很完美

我唯一的问题是，当页面被替换时，所有内容都会变白约1秒

我需要避免那个空白的闪光灯，所以我想在替换过程中放置一个加载页面

NB:我没有使用Ajax，我只是使用jQuery将脚本运行所在页面的内容存储在变量中

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

解决方案？

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

在chrome中查看此内容！

var script='console.log（“新文档脚本标记正在工作”）；'；
var newDoc=''+脚本+''；
var load=document.createElement（'p'）；
loading.innerText='loading…'；
$（文档）.ready（函数（）{
var content=$（'body'）.contents（）；//旧文档正文的内容
$（'body'）.html（正在加载）；
setTimeout（function（）{//对于本例，减慢速度
对于（var i=0，contentLen=content.length；iis it ajax请求获取/生成内容？不，我从脚本所在的同一页面获取信息。你可以创建一个你不会注意到没有太多数据的白色闪光灯。顺便说一句，你所说的有巨大的设计问题。重新思考你正在做的事情，并从正确的开始，而不是r让你的用户等一等，然后用已经可用的数据替换不应该存在的东西…什么？！谢谢你，我已经尝试过这个解决方案，但我遇到了问题，因为我在新页面中添加了一些包含的javascript，不会以这种方式加载。叹气。再说一次，你在说什么？！没有令人满意的答案回答你。问一个更好的问题，伙计！对不起？问题是什么？我在问一些应该有解决办法的问题，问题很清楚。如果你不知道答案，请跳过这个问题。好吧，在我看来，这个问题很糟糕，值得3次否决票。所以，请不要因为问题本身是一个问题而讨厌好的答案wful.@CCInc询问者的评论似乎不像是仇恨。它更像是一种呼救，不可能得到有用的回答。
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
});