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 回答