Question

我在申请中工作

我必须使用javascript更改页面中的一些css文件和一些图像（从服务器重新加载它们），但这需要一些时间，显然页面项目会缓慢重新加载 - 在慢速连接中，因此可能在后台进行此处理，然后在准备好后显示整个页面？

Answer 1

您可以在工作进行时隐藏整个页面，或者您可以加载CSS和图像，并且只有在您的所有材料都已发送到客户端时才对DOM进行更新。

您可以通过创建新的Image对象来加载图像：

var img = new Image();
img.onload = function() { /* do something */ };
img.src = "/new/image.png";

当客户端收到图像文件并准备好显示时，“onload”功能将运行。因此，您可以安排以这种方式加载图像，并使用“加载”处理程序来跟踪它们何时准备好。当所有这些都是，那么你可以更新DOM，它应该很快。

Answer 2

AFAIU你可以把它放在一个隐藏的IFRAME中。在此IFRAME中，您可以处理onLoad事件。但是，这不会加快加载过程，只会将其隐藏起来。

Examle：假设您有一个名为longLoad（）的持久JavaScript方法。你应该把它放在一个单独的HTML页面中，例如的 hidden.html 即可。

<html>
  <script type="text/javascript">
   function longLoad() // javascript method here...
   {
     /// some code here...
   }
  </script>
  <body onLoad="longLoad();">
  </body>  
</html>

您的主页面（在浏览器中实际可见的页面）可能如下所示：

<html>
<body>
....
.... content
....
<iframe src ="hidden.html" width="100%" height="0">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>

正如您所看到的，IFRAME高度设置为0使其在页面上不可见 - 这就是我将其称为隐藏的原因。但是，当用户加载页面时，也会加载隐藏的IFRAME。并且还将调用其onLoad事件处理程序。并且可以从该JavaScript事件处理程序（通过DOM树）访问和修改主页的内容。

PS。上面的代码是从内存中编写的，但是所提出的解决方案可行。它早在AJAX普及之前就被使用了。

JavaScript后台工作（等到所有处理完成并显示结果）

2 个答案: