Nano Hash - криптовалюты, майнинг, программирование

Скрыть страницу при загрузке с помощью steps.js

Я работаю с pace, загрузчиком страниц, и он работает нормально. Но я не могу понять, как скрыть всю страницу, кроме полосы загрузки во время загрузки страницы, и показать ее после завершения загрузки. Есть идеи?

javascript html loading
09.03.2014

Ответы:


1

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

В документации Pace скрыта функция Pace.on(). Вы можете использовать его для привязки к событиям, перечисленным в документах, например так:

Pace.on("done", function(){
    $(".cover").fadeOut(2000);
});
07.06.2014

2

Я решил это, используя следующий код.

.pace-running > *:not(.pace) {
  opacity:0;
}

как display:none не вызывал проблемы с выравниванием на картах Google на странице. это работает отлично и нужно добавить немного перехода к этому.

16.05.2016

3

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

$(window).load(function() {
        $(".cover").fadeOut(2000);
    })

.cover {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1999;
    background:rgb(33,33,33);
}

И вы можете добавить загрузочный .gif или что-то в контейнер, он исчезнет, ​​когда ваша страница будет полностью загружена.

09.03.2014

4

Я знаю, что этот вопрос довольно старый, но мне удалось заставить его работать с одним небольшим блоком CSS.

.pace-running > *:not(.pace) {
  display: none;
}

При этом используется класс, который PACE помещает в элемент <body> во время загрузки страницы. Обратите внимание, что это может привести к тому, что страница исчезнет во время длинных запросов AJAX... Возможно, вы могли бы обойти это, написав Javascript для проверки удаления класса .pace-running из элемента <body>. Однако, если у вас нет запросов XHR, вам должно хватить именно этого.

19.01.2016

5

Pace.js фактически добавляет класс к телу. «Темп-бег» добавляется, когда темп активен, и заменяется на темп-сделано, когда он завершен.

Тогда вы можете определить css:

.pace-running{
  opacity: .67;
  background-color: #2E2E2E;
}

Вы можете отредактировать приведенный выше код в соответствии с вашими потребностями.

27.12.2015

6

Если вы решили не использовать непрозрачность, вы можете попробовать:

.pace-running {
    background: rgba(250,250,250, 1);
    color: rgba(200,200,200, 1);
}

Требуется меньше кода, чтобы уменьшить видимость или скрыть фоновую страницу во время работы Pace.js.

30.11.2016

7

Попробуйте это ниже примера просто и легко....

  1. найти идентификатор набора для контейнера div всей страницы
<body>
    <div id="pagecontent">
        Loaded asdasdas das das
        dasd
        asd
        asdasdasdasdasdasdasdasdasd

    </div>
</body>

  1. после установки этот css основан на том, что вы упомянули во всем идентификаторе контейнера

    #pagecontent {
    opacity: 0;
}

#pagecontent {
                    -webkit-transform: opacity 0.5s ease;
                    -moz-transform: opacity 0.5s ease;
                    -o-transform: opacity 0.5s ease;
                    -ms-transform: opacity 0.5s ease;
                    transform: opacity 0.5s ease;
}

body.pace-running #pagecontent {
    opacity: 0;
}
body.pace-done #pagecontent {
    opacity: 1;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 200px;
  background: #fff;
  border: 1px solid #f2851f;

  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: translate3d(0, 0, 0);
  -moz-transition: translate3d(0, 0, 0);
  -ms-transition: translate3d(0, 0, 0);
  -o-transition: translate3d(0, 0, 0);
  transition: translate3d(0, 0, 0);

  max-width: 200px;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: #f2851f;
}

 .pace.pace-inactive {
   display: none;
 }

БЮР:

http://jsfiddle.net/686rugps/

14.04.2015
  • В #pagecontent {} разве не должно быть transition вместо transform? 30.07.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..