Необходимо настроить скрипт предварительной загрузки, чтобы не загружать страницу, которая загружается менее чем за 1 секунду - PullRequest
Новая
       15

Необходимо настроить скрипт предварительной загрузки, чтобы не загружать страницу, которая загружается менее чем за 1 секунду

0 голосов
/ 30 ноября 2018

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

<script>
    document.onreadystatechange = function () {
        var state = document.readyState
        if (state == 'interactive') {
            document.getElementById('contents').style.visibility="hidden";
        } else if (state == 'complete') {
            setTimeout(function(){
                document.getElementById('interactive');
                document.getElementById('load').style.visibility="hidden";
                document.getElementById('contents').style.visibility="visible";
            },1);
        }
    }
</script>
<div id="load"></div>

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

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

В настоящее время ваше #load изображение отображается по умолчанию.Чтобы сделать его скрытым по умолчанию, добавьте visibility: hidden; к правилу стиля #load.Затем добавьте правило для .loading #load, которое переопределяет visibility, чтобы сделать его видимым.Это означает, что #load будет видимым только тогда, когда один из его родительских элементов имеет класс loading, что активирует правило, которое переопределяет visibility. 

#load {
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("../images/loading.gif") no-repeat fixed center rgba(255,255,255,1);
    visibility: hidden;
}

.loading #load {
    visibility: visible;
}

Когда ваш CSS на месте,JavaScript довольно прост.Мы собираемся использовать setTimeout, чтобы установить задержку в 1 секунду (1000 мс), а затем запустить функцию.Эта функция проверяет, готов ли документ, и, если нет, добавляет класс loading к корневому элементу HTML, что позволяет отображать изображение #load через 1 секунду после синтаксического анализа тега скрипта.

Мы также добавляем прослушиватель событий в документ для события load (что происходит сразу после того, как для document.readyState установлено значение complete).Когда это событие срабатывает, оно удаляет класс loading из корневого элемента.Если это произойдет до 1 секунды, это нормально.Неважно, что корневой элемент еще не имеет класса loading.В этом случае этого не произойдет, поскольку он добавляется только в том случае, если readyState еще не complete. 

setTimeout(function() {
    if (document.readyState != "complete") {
        document.documentElement.classList.add("loading");
    }
}, 1000);
document.addEventListener("load", function() {
    document.documentElement.classList.remove("loading");
});

. Вам следует ознакомиться с со всеми возможными значениями * 1034.*.Возможно, вы захотите скрыть загружаемое изображение, как только документ станет interactive.В этом состоянии не все изображения были загружены, но документ был полностью проанализирован и готов к манипулированию DOM.В этом случае вы будете прослушивать событие readystatechange вместо события load: 

setTimeout(function() {
    if (document.readyState == "loading") {
        document.documentElement.classList.add("loading");
    }
}, 1000);
document.addEventListener("readystatechange", function() {
    if (document.readyState != "loading") { // either interactive or complete
        document.documentElement.classList.remove("loading");
    }
});
0 голосов
/ 30 ноября 2018

Одна секунда, когда?Помните, что ваш код Javascript, который будет проверять это, также должен быть загружен и проанализирован.

В любом случае это должно направить вас в правильном направлении.Обратите внимание, что #contents начинается скрытно. 

<div id="contents" style="visibility:hidden">Contents</div>
<div id="loader" style="visibility:visible"></div>
<script>
   setTimeout(function() {
      checkDocumentState();
   }, 1000);

  function checkDocumentState() {
     var state = document.readyState;
     if (state === 'loading') {
        // do something if you need to 
        // or do nothing
        console.log('Still loading');
        return;
     } else if (state === 'interactive') {
        //do something if you need to 
        // or do nothing
        console.log('Now getting images and stuff');
        return;
     } else if (state === 'complete') {
        // Make the content visible 
        // Do whatever else you need to do
        console.log('Everything is here. Show the contents.');
        document.getElementById('loader').style.visibility="hidden";
        document.getElementById('contents').style.visibility="visible";
     }
  }

</script>
...