Firefox отображает изображения по мере их получения? - PullRequest
Новая
       0

Firefox отображает изображения по мере их получения?

0 голосов
/ 12 февраля 2010

У меня есть тестовый код ниже.Я ожидал, что Firefox отобразит первое изображение, выполнит задержку и приостановит извлечение второго изображения, затем отобразит «Hello» и второе изображение.

Почему после задержки отображается все сразу?

ОБНОВЛЕНИЕ: Мне нужно добавить больше пояснений.Я НЕ пытаюсь написать производственный код.Я прочитал, что браузер приостановит выполнение сценария js до его завершения, а затем продолжит отображать все, что присутствует после тега script.Это включает в себя получение изображений на других подключениях браузера.Я пытаюсь доказать, что это действительно так, а это не так. 

<body>
<img src="images/web.gif" /><br />
<script type="text/javascript">
  document.body.innerHTML = "";
  for (var i = 0; i < 1000000000; i++) {
  }
  document.write( "hello<br />");
</script>
<img src="images/web2.gif" /><br />
</body>

Ответы [ 3 ]

2 голосов
/ 12 февраля 2010

Что ж, встраивание document.write в часть скрипта фактически заставляет браузер интерпретировать это сразу, поскольку вы можете выводить туда разные вещи, в том числе, например, начало комментария (<!--), которое сделает недействительными остальные.

Если вы хотите избежать выполнения Javascript, блокирующего загрузку страницы, вы должны использовать внешний файл и атрибут defer. Это скажет браузеру, что этот скрипт не нужно интерпретировать сразу, чтобы браузер мог продолжить рендеринг страницы: 

<script type="text/javascript" src="delay.js" defer="defer"></script>

Однако, если вы сделаете это, вы не сможете встроить вывод с помощью document.write, как вы это сделали в своем примере. Но это не должно быть проблемой. Вы можете добавить объект в том же месте и указать в своем сценарии следующее. 

document.getElementById("output").innerHTML = "Hello";

Кроме того, если вы используете defer в скрипте, то переменные вашего скрипта не будут сразу доступны для других не отложенных блоков скрипта в вашем приложении (по понятным причинам, они еще не могут быть загружены!).

Во-вторых, не используйте цикл для эмуляции задержки. Я не могу не подчеркнуть, насколько это плохо. Я полагаю, вы использовали это только ради простоты.

0 голосов
/ 12 февраля 2010

Вот способ сделать то, что вы хотите; Я использую библиотеку jQuery, чтобы упростить ее, поэтому я включил в нее и инструкцию для ее загрузки из Google! 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
  // This won't execute until the page has actually loaded
  $(document).ready(function() {   
    // The number is miliseconds; in this case a 5 sec wait
    // and the text is the name of the function to call.
    window.setTimeout(addImage,5000);
  });

  function addImage() { 
     $('body').append('<img src="book.jpg" />');
  }
</script>

Это достигает вашей цели. После загрузки страницы она будет ждать 5 секунд (или в любое другое время, которое вы укажете), а затем добавит второе изображение (на своем рабочем столе я дважды использовала одно и то же изображение, чтобы убедиться, что это работает правильно).

0 голосов
/ 12 февраля 2010

При всем уважении ... использование такого цикла в качестве таймера является нарушением всего, во что я верю! (Я не знаю, должен ли здесь быть подмигивающий смайлик ... потому что я имею в виду, но это не оскорбление для вас)

В JavaScript есть объект таймера, есть несколько плагинов для jQuery, пожалуйста, используйте один из них. Потому что Firefox, скорее всего, либо оптимизирует цикл до нуля, либо выполняет его довольно быстро.

Редактировать: Если подумать, Firefox, скорее всего, сначала загружает весь документ перед выполнением JavaScript.

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

Нет похожих вопросов

...