Как отложить отображение некоторого HTML до тех пор, пока не загрузится JavaScript - PullRequest
Новая
       10

Как отложить отображение некоторого HTML до тех пор, пока не загрузится JavaScript

4 голосов
/ 25 мая 2011

Когда страница загружается на мой сайт, перед javascript появляется HTML, что приводит к мерцанию при загрузке javascript. Ответ на в этом сообщении stackoverflow дал отличное решение. Но я хотел бы загрузить хотя бы часть HTML-кода перед Javascript, чтобы пользователь не сталкивался с пустой страницей при медленном соединении. Например, я хотел бы загрузить заголовок немедленно, но дождаться загрузки HTML-кода для улучшенного аккордеона javascript, пока не загрузится javascript. Какие-либо предложения?

Вот код, который я позаимствовал из ответа, приведенного выше:

CSS: 

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

HTML: 

<div style="display: none" id="hideAll">&nbsp;</div>

Javascript 

 window.onload = function() 
     { document.getElementById("hideAll").style.display = "none"; }

<script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script>

Ответы [ 2 ]

3 голосов
/ 25 мая 2011

Я бы посоветовал вам определить базовые / поддерживающие JavaScript стили элементов, которые вы хотите отобразить с помощью CSS в обычном блоке style: 

<style type="text/css">
    #javaScriptAccordion {
        display: none;
    }
</style>

А затем используйте теги noscript (в head), чтобы исправить это при отсутствии JavaScript: 

<noscript>
    <style type="text/css>
        #javaScriptAccordion {
            display: block;
        }
    </style>
</noscript>

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

Выше были внесены изменения , чтобы предотвратить «отсутствие содержимого» (как описано @ Josh3736 в его ответе ), и теперь использует opacity, чтобы скрыть содержимое : 

<style type="text/css">
#elementToShowWithJavaScript {
    opacity: 0.001;
    width: 50%;
    margin: 0 auto;
    padding: 0.5em;
    border-radius: 1em 0;
    border: 5px solid #ccc;
    }
</style>
<noscript>
<style type="text/css">
    #elementToShowWithJavaScript {
        opacity: 1;
        }
</style>
</noscript>

Демонстрационная версия .

К сожалению, я не совсем уверен, что понимаю ваш вопрос. Это заставляет меня предлагать решение вопроса, который я думаю вы задали (извините, все, что я могу предложить, это то, что сейчас рано в Великобритании. И я не проснулся по своему выбору ... вздох) если есть что-то еще, что я пропускаю (или я полностью отвечаю на неправильный вопрос), пожалуйста, оставьте комментарий, и я постараюсь быть более полезным.

0 голосов
/ 25 мая 2011

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

<div id="accordion">...</div>
<script type="text/javascript">...</script>

Однако встроенный скрипт, смешанный с разметкой HTML, является плохой идеей и должен бытьизбегать как можно больше.По этой причине идеально включать встроенный только вызов функции в функцию, объявленную в вашем внешнем файле сценария.(Когда вы ссылаетесь на внешний скрипт (<script src="...">), визуализация вашей страницы приостанавливается до тех пор, пока она не загрузится.) 

<html>
<head>
<script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file -->
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">renderAccordion();</script>
...
</body>
</html>

Конечно, правильный способ сделать этоэто просто присоединиться к событию DOM ready из script.js и вообще не использовать встроенный скрипт.Это, однако, открывает возможность флэш-содержимого на очень медленных соединениях и / или очень больших документах, где загрузка всего самого HTML занимает несколько секунд.Это, однако, гораздо более чистый подход - ваш скрипт гарантированно будет загружен до того, как что-либо будет отображено;Вопрос только в том, сколько времени понадобится для DOM.Используя jQuery, в script.js: 

$(document).ready(function() {
    // Do whatever with your accordion here -- this is guaranteed to execute
    // after the DOM is completely loaded, so the fact that this script is
    // referenced from your document's <head> does not matter.
});

Умное использование <style> и <noscript> делает хорошую работу, гарантируя, что в вашем контенте нет вспышки.аккордеон;однако, при использовании этого метода будет эффект напротив - будет вспышка содержимого .

По мере загрузки страницы ваш аккордеон будет полностью скрыт(display:none;), затем, как только ваш скрипт наконец исполнится и вернет display обратно к block, аккордеон внезапно материализуется и оттолкнет все под ним.Это может или не может быть приемлемо - не будет столько же движения, но вещи все равно должны будут прыгать после того, как они изначально визуализированы.

В любом случае, не ждите, пока onload отобразит ваш аккордеон. onload не сработает, пока все - включая все изображения - не загрузятся полностью.Нет причин ждать загрузки изображений;Вы хотите сделать свой аккордеон как можно скорее.

...