Фоновая работа JavaScript (дождитесь окончания обработки и покажите результат) - PullRequest
0 голосов
/ 17 декабря 2010

я работаю в приложении

Мне нужно изменить некоторые CSS-файлы на странице и некоторые изображения (перезагрузить их с сервера), используя JavaScript, но это занимает некоторое время, и очевидно, что элементы страницы перезагружаются медленно - при медленных соединениях - поэтому возможно сделать эту обработку в фоновом режиме, а затем отобразить всю страницу, когда будете готовы?

Ответы [ 2 ]

1 голос
/ 17 декабря 2010

AFAIU вы можете поместить его в скрытый кадр. В этом IFRAME вы обрабатываете событие onLoad. Однако это не ускорит процесс загрузки, а только скроет его от пользователя.

нелогич-: Допустим, у вас есть долгосрочный метод JavaScript с именем longLoad (). Вы должны поместить его в отдельную страницу 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 стал популярным.

1 голос
/ 17 декабря 2010

Вы можете скрыть всю страницу, пока идет ваша работа, или вы можете загрузить свои CSS и изображения и выполнять обновления DOM только после того, как все ваши материалы будут переданы клиенту.

Вы можете загрузить изображение, создав новый объект Image:

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

Функция «onload» запустится, когда клиент получит файл изображения и он будет готов к отображению.Таким образом, вы можете организовать загрузку изображений таким образом и использовать обработчики «загрузки», чтобы отслеживать, когда они будут готовы.Когда все они есть, вы можете обновить DOM, и он должен работать очень быстро.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...