0

我在一个应用程序中工作

我必须使用 javascript 更改页面中的一些 css 文件和一些图像(从服务器重新加载它们),但这需要一些时间,而且很明显页面项目重新加载很慢 - 在慢速连接中 - ,所以有可能做到这一点在后台处理,然后在准备好时显示整个页面??

4

2 回答 2

1

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

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

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

当客户端收到图像文件并准备好显示时,“onload”函数将运行。因此,您可以安排以这种方式加载图像,并使用“加载”处理程序来跟踪它们何时准备就绪。当所有这些都完成后,您就可以更新 DOM,它应该会很快完成。

于 2010-12-17T13:44:42.527 回答
1

AFAIU 你可以把它放在一个隐藏的 IFRAME 中。在这个 IFRAME 中,您处理 onLoad 事件。但是,这不会加快加载过程,它只会对用户隐藏它。

示例:假设您有一个名为 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,使其在页面上不可见——这就是我将其称为hidden的原因。但是,当用户加载页面时,隐藏的 IFRAME 也会被加载。并且它的 onLoad 事件处理程序也会被调用。并且可以从该 JavaScript 事件处理程序(通过 DOM 树)访问和修改主页的内容。

PS。上面的代码是从内存中编写的,但是提出的解决方案是有效的。它早在 AJAX 流行之前就已经使用了。

于 2010-12-17T13:46:36.543 回答