7

На странице есть элемент HTML, стили которого назначаются Jquery плагином. И пока страница подгружается вместе с JS, стили этого элемента прыгают

1
  • 2
    Что-то не сильно понятно что к чему. Прелоадеров реализаций куча, в чём вопрос?
    – user31688
    2 июн 2015 в 12:52

1 ответ 1

20

Достаточно закрыть необходимые вам или все элементы на странице прелоадером, который будет исчезать после необходимых действий на странице.

Пример доработан. Версию с использованием библиотеки jquery можно считать устаревшей, но она была оставлена, чтобы показать, как делать не нужно.

Обновленный вариант (2019):

function loadData() {
  return new Promise((resolve, reject) => {
    // setTimeout не является частью решения
    // Код ниже должен быть заменен на логику подходящую для решения вашей задачи
    setTimeout(resolve, 2000);
  })
}

loadData()
  .then(() => {
    let preloaderEl = document.getElementById('preloader');
    preloaderEl.classList.add('hidden');
    preloaderEl.classList.remove('visible');
  });
#preloader {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      width: 100%;
      height: 100%;
      overflow: visible;
      background: #fbfbfb url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
}
    
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
<div id="preloader" class="visible"></div>
<p>EXAMPLE</p>

Вариант 2015 года (Устарел. Так делать не нужно!):

jQuery(document).ready(function($) {
  $(window).load(function() {
    setTimeout(function() {
      $('#preloader').fadeOut('slow', function() {});
    }, 2000);

  });
});
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #333 url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="preloader"></div>
<p>EXEMPLE</p>

Пример на JSFiddle

17
  • что-то обновленный пример хуже "устаревшего" :) setTimeout не дает гарантию, что все загрузилось, а большое число может только ухудшить поведение, так как пользователь будет думать, что слишком долго загружается
    – Grundy
    3 июл 2020 в 11:57
  • Обновленный вариант (2019): он подходит, если мне нужно чтобы прелоадер исчезал только после полной загрузки страницы (скрипты, стили, картинки)?
    – Sergey
    3 июл 2020 в 13:19
  • @Grundy это всего лишь пример, который демонстрирует логику отображения и скрытия лоадера. setTimeout конечно же должен быть заменен на код, который удовлетворяет именно вашим нуждам (например, на загрузку данных с помощью fetch) 3 июл 2020 в 15:24
  • @Sergey код нуждается в доработке под конкретную задачу. Если просто скопировать его как есть, поведение будет, скорее всего, не таким, как вам необходимо 3 июл 2020 в 15:25
  • 1
    @Sergey Добавлю. Именно в примере 2015 года порядок скриптов может быть какой угодно, потому что за статусом загрузки страницы следит jquery 3 июл 2020 в 18:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.