The page has an HTML element that is styled by a Jquery plugin.
And while the page is loading with JS, the styles of this element are jumping
Answer 1, authority 100%
It is enough to close the elements you need or all the elements on the page with a preloader, which will disappear after the necessary actions on the page.
The example has been improved. The jquery version is deprecated, but has been abandoned to show how not to do it.
Updated version (2019):
function loadData () {
return new Promise ((resolve, reject) = & gt; {
// setTimeout is not part of the solution
// The code below should be replaced with logic suitable for solving your problem
setTimeout (resolve, 2000);
})
}
loadData ()
.then (() = & gt; {
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;
} & lt; div id = "preloader" class = "visible" & gt; & lt; / div & gt ;
& lt; p & gt; EXAMPLE & lt; / p & gt;