Как сделать прелоадер на время загрузки JS?

#javascript #jquery

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

Ответы

Ответ 1

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

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

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



function loadData() {
  return new Promise((resolve, reject) => {
    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;
}

EXAMPLE




Вариант 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;
}


EXEMPLE




Пример на JSFiddle